通过React-Router v4传递值

Question

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

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

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

我要传递的id是其中嵌套了Link组件的对象的属性。

我params={}在另一个StackOverflow线程中发现了这种语法。我的代码编译时没有中断，所以这可能意味着它起作用了吗？但是，我不确定如何在端点上检索此传递的值。

任何帮助将不胜感激。

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