问题：如何通过 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={}。我的代码在没有中断的情况下编译，所以这可能意味着它有效？但是，我不确定如何在端点检索这个传递的值。
任何帮助将不胜感激。
【问题讨论】：
标签： reactjs hyperlink react-router
如果您使用的是反应钩子，您可以使用 useLocation
获取从状态对象传递的参数<Link to={{ pathname: `page/${id}`, state: { foo: 'bar'} }}>Click me</Link>
<Route
exact
path={`page/:id`}
component={BComponent}
/>
const BComponent = (props) => {
const location = useLocation();
console.log(location.state.foo);
return ()
}
【讨论】：
如果你想通过一个路由发送多个参数，你可以这样做。
1.链接元素
<Link to={`/exchangeClicked/${variable1} ,${variable2},${variable3}`} >Click
</Link>
2.配置您的路由路径以接受这些参数
<Route
exact
path="/exchangeClicked/:variable1,:variable2,:variable3"
component={MyComponent}
/>
3.然后您可以通过以下方式访问新路由中的参数，
<Typography variant="h4" color="inherit">
Exchange:{this.props.match.params.variable1}
</Typography>
<Typography variant="Body 1" color="inherit">
Type:{this.props.match.params.variable2}
</Typography>
<Typography variant="Body 1" color="inherit">
Durabiliy:{this.props.match.params.variable3}
</Typography>
【讨论】：
要通过 Link 组件传递数据，您可能只想在实际链接上接受一个参数。
<Link to={`/b/${_id}`}>blah blah</Link>
在路线中，你会设置这样的东西
<Route path="b/:id" name="routename" component={foo}></Route>
然后您可以通过this.props.match.params.id 访问新路由中的参数
如果你真的不希望你的 id 出现在实际路线中，那就有点烦人了。
【讨论】：
传递道具
您可以通过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} />
然后你可以在你的链接to中传递URL参数如ID：
<Link to={`route/foo`}>My route</Link>
您可以通过match 对象访问组件内的参数：
const {id} = props.match.params
console.log(id) // "foo"
来源
【讨论】：
props root 访问它们？您必须进入location.state 才能获得它们？
props.location.state.myPropName
withRouter HOC 包裹你的组件。