小编典典

通过React-Router v4传递值

reactjs

问:如何通过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线程中发现了这种语法。我的代码编译时没有中断,所以这可能意味着它起作用了吗?但是,我不确定如何在端点上检索此传递的值。

任何帮助将不胜感激。


阅读 248

收藏
2020-07-22

共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"

资料来源

2020-07-22