当我链接到 React.js 中的不同页面时,如何传入一个数字?

IT技术 javascript reactjs
2021-05-17 07:02:31
render(

    <Router>
        <Switch>
            <Route exact path="/" component = { Home } />
            <Route exact path="/gallery" component = { Gallery } />
            <Route exact path="/details" component = { Details } />
        </Switch>
    </Router>,

    // Define your router and replace <Home /> with it!
    document.getElementById('app')
);

这是我的网络应用程序的路由

        return data.map((eachData, index) => {
            return (  <Link to={{ pathname: '/details/' + this.state.selectedKey }}><PokemonInfo poke={ eachData } key={ index } /></Link> );
        });
    };

这是我在移动到另一个链接时尝试链接到 /details 页面的代码部分。我想传入一个数字(不是状态。与我的示例代码不同)。

简而言之,我想将 2 传入链接,并使其直接指向 /details/2,然后在 details.jsx 组件中检索该“2”。

我怎样才能做到这一点?

编辑:详细信息

类详细信息扩展了 React.Component {

constructor() {
    super();


    this.state = {


        pokemon: []

    };


};

componentWillMount() {
// Called first time the comp is loaded right before the comp is added to the page
    console.log('Component WILL MOUNT!')
    console.log("passed" , this.props.match.params.id)
    var url = "https://pokeapi.co/api/v2/pokemon/" + this.props.match.params.id; 

    axios.get(url)

    .then((response) => {
        // setState re-renders component
        this.setState({
            pokemon: response.data
        })

        console.log(this.state.pokemon)

    })

        .catch((error) => {
            console.log(error);
    })
}

render() {

    return (
            <Card className = "PokemonView">
                <Card.Content>
                    <Card.Header className = "PokemonView_header">
                        { this.state.pokemon.name }
                    </Card.Header>
                    <Card.Meta>
                        Pokedex #{ this.state.pokemon.id }
                    </Card.Meta>
                    <Card.Meta>
                        Height { this.state.pokemon.height }
                    </Card.Meta>
                    <Card.Meta>
                        Weight { this.state.pokemon.weight }
                    </Card.Meta>

                </Card.Content>
            </Card>
    );
}

}

导出默认详细信息

3个回答

尝试使用

<Route path="/details/:id" component={(props) => (<Details {...props}/>) } />

如果我没记错的话,您设置的路线如下:

<Route path="/details/:id" component = { Details } />

然后在Details你开始this.props.match.params.id使用组件中

您必须添加 route:<Route path="/details/:myParam" component={Details} />并且可以this.props.match.params.myParam在 Details 组件中检索路由参数