问题:如何通过 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 线程中。我的代码编译后没有中断,所以这可能意味着它有效?但是,我不确定如何在端点检索此传递的值。
任何帮助将不胜感激。
最佳答案
传递 Prop
您可以通过 state
对象将任意 props 传递给路由:
<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} />
然后您可以将链接中的 ID 等 URL 参数传递到
:
<Link to={`route/foo`}>My route</Link>
您可以通过 match
对象访问组件内的参数:
const {id} = props.match.params
console.log(id) // "foo"
来源
关于reactjs - 通过 React-Router v4 传递值 <Link/>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45598854/