通过 React-Router v4 <Link /> 传递值

Question

问题：如何通过 React-Router 的 Link 组件传递 prop 或单个值（如 _id）并在端点捕获它？

这就是我的意思：假设我们在 /a 页上。该链接会将用户带到 /b。因此 <Link to='/b'> 。现在，我需要通过链接将_id 从/a 传递到/b。

 <Link to='/b' params={_id}>blah blah</Link>

我试图传递的 id 是 Link 组件嵌套在其中的对象的属性。

我在另一个 StackOverflow 线程中找到了这个语法 params={} 。我的代码在没有中断的情况下编译，所以这可能意味着它有效？但是，我不确定如何在端点检索这个传递的值。

任何帮助将不胜感激。

原文由 jsdev17 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

传递道具

您可以通过 state 对象将任意道具传递给路由：

 <Link to={{ pathname: '/route', state: { foo: 'bar'} }}>My route</Link>

然后您可以从组件中访问 state 对象：

 const {foo} = props.location.state

console.log(foo) // "bar"

传递参数

配置您的路由路径以接受命名参数（ :id ）：

 <Route path='/route/:id' exact component={MyComponent} />

然后，您可以在链接中传递 URL 参数，例如 ID to ：

 <Link to={`route/foo`}>My route</Link>

您可以通过 match 对象访问组件中的参数：

 const {id} = props.match.params

console.log(id) // "foo"

来源

• https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md

• https://github.com/ReactTraining/react-router/issues/4036

原文由 Miguel Mota 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

要通过 Link 组件传递数据，您可能只想在实际链接上接受一个参数。

 <Link to={`/b/${_id}`}>blah blah</Link>

在路线中，你会设置这样的东西

<Route path="b/:id" name="routename" component={foo}></Route>

然后，您可以通过 this.props.match.params.id 访问新路由中的参数

如果你真的不想在实际路线中使用你的 id，它会变得更烦人。

原文由 Christopher Messer 发布，翻译遵循 CC BY-SA 3.0 许可协议