问题：如何通过 React-Router 的 Link 组件传递 prop 或单个值（如 _id），并在端点处捕获它？
这就是我的意思：假设我们在页面 /a 上。该链接会将用户带到 /b。如此<Link to='/b'>。现在，我需要通过链接从/a 到/b 传递一个_id。
<Link to='/b' params={_id}>blah blah</Link>
我试图传递的 id 是嵌套了 Link 组件的对象的属性。
我params={}在另一个 StackOverflow 线程中发现了这个语法。我的代码编译没有破坏，所以这可能意味着它有效？但是，我不确定如何在端点检索此传递的值。
任何帮助将不胜感激。
传球props
您可以通过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} />
然后，您可以在链接中传递 URL 参数，例如 ID to：
<Link to={`route/foo`}>My route</Link>
您可以通过match对象访问组件内的参数：
const {id} = props.match.params
console.log(id) // "foo"
来源
要通过 Link 组件传递数据，您可能只想接受实际链接上的参数。
<Link to={`/b/${_id}`}>blah blah</Link>
在 Route 中，你会设置类似这样的东西
<Route path="b/:id" name="routename" component={foo}></Route>
然后，您可以通过以下方式访问新路线中的参数 this.props.match.params.id
如果你真的不希望你的 id 出现在实际的路线中，那就有点烦人了。
如果你想通过一个路由发送多个参数，你可以这样做。
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>
如果您使用的是React钩子，则可以使用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 ()
}