问:如何通过React-Router的Link组件传递prop或单个值(如_id),并在端点捕获它?
这就是我的意思:假设我们在/ a页上。链接会将用户带到/ b。就这样<Link to='/b'>。现在,我需要通过链接将_id从/ a传递到/ b。
<Link to='/b'>
<Link to='/b' params={_id}>blah blah</Link>
我要传递的id是其中嵌套了Link组件的对象的属性。
我params={}在另一个StackOverflow线程中发现了这种语法。我的代码编译时没有中断,所以这可能意味着它起作用了吗?但是,我不确定如何在端点上检索此传递的值。
params={}
任何帮助将不胜感激。
传递道具
您可以通过state对象将任意道具传递到路线:
state
<Link to={{ pathname: '/route', state: { foo: 'bar'} }}>My route</Link>
然后,您可以state从组件内部访问对象:
const {foo} = props.location.state console.log(foo) // "bar"
传递参数
配置您的路由路径以接受命名参数(:id):
:id
<Route path='/route/:id' exact component={MyComponent} />
然后,您可以在链接中传递URL参数(例如ID)to:
to
<Link to={`route/foo`}>My route</Link>
您可以通过match对象在组件内访问参数:
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