javascript - 当我链接到 React.js 中的不同页面时，我如何传递一个数字？

Question

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>
    );
}

导出默认详细信息

Answer 1

尝试使用

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