Javascript 当我链接到React.js中的不同页面时，如何传递数字？ 渲染( , //定义您的路由器并替换为它！ document.getElementById（'app'） );

这是我的web应用程序的路由

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

返回数据.map（（eachData，index）=>{
返回（）；
});
};

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

简单地说，我想传入（比如说2）链接，使其直接指向/details/2，并在details.jsx组件中检索该“2”

我该怎么做

编辑：详细信息

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

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

constructor（）{
超级（）；
此.state={
口袋妖怪：[]
};
};
组件willmount（）{
//在将comp添加到页面之前首次加载comp时调用
console.log（'组件将装入！'）
log（“已通过”，this.props.match.params.id）
变量url=”https://pokeapi.co/api/v2/pokemon/“+this.props.match.params.id；
获取（url）
。然后（（响应）=>{
//设置状态重新渲染组件
这是我的国家({
口袋妖怪：response.data
})
console.log（this.state.pokemon）
})
.catch（（错误）=>{
console.log（错误）；
})
}
render（）{
返回(
{this.state.pokemon.name}
Pokedex{this.state.pokemon.id}
高度{this.state.pokemon.Height}
权重{this.state.pokemon.Weight}
);
}

}

---

导出默认详细信息

如果我没记错的话，您可以将路由设置为：

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

---

然后在

详细信息

组件中，您将获得要使用的

this.props.match.params.id

。

您必须添加路由：

，并且可以在详细信息组件中使用

this.props.match.params.myParam

检索路由参数。

尝试使用

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

（）}/>

您应该删除

精确的
属性。那么，我们必须如何更改为“链接到零件”才能传递id？这个
链接看起来不错。应该根据模式
/details/：id
解析url。“详细信息”页面中的console.log（“已传递”，this.props.match.params.id）无效。谢谢。那么，我们必须如何更改链接到零件才能传递id。。。应该足够了，并且“详细信息”页面中的console.log（“已传递”，this.props.match.params.id）不起作用。我使用了：id而不是：myParam。您还必须从中删除确切的。你这么做了吗？它调用componentWillMount时id为'undefined'还是根本不呈现组件？对不起，我没有得到{（props）=>部分。你是说“Details}/>这给了我一个语法错误。很抱歉，我能给出确切的语法吗？它工作了！你这个摇滚人。但是这怎么。。。这东西还能用吗？它可以被其他东西代替吗？实际发生的是我们创建了一个中间层，它从
Route
接受
props
，并使用
props
作为它的props来呈现
元素（这就是我们使用
{…props}时发生的情况）
。实际上它相当于
React.createElement（详细信息，Object.assign（{}，this.props））；
）
<Route path="/details/:id" component={(props) => (<Details {...props}/>) } />