通过 React-Router v4 <Link /> 传递值

Posted 2023-02-21

【中文标题】通过 React-Router v4 <Link /> 传递值

【英文标题】：Passing values through React-Router v4 <Link />

【发布时间】：2018-01-17 19:49:23

【问题描述】：

问题：如何通过 React-Router 的 Link 组件传递 prop 或单个值（如 _id）并在端点捕获它？

这就是我的意思：假设我们在 /a 页。该链接会将用户带到 /b。因此<Link to='/b'>。现在，我需要通过链接将 _id 从 /a 传递到 /b。

<Link to='/b' params=_id>blah blah</Link>

我试图传递的 id 是 Link 组件嵌套在其中的对象的属性。

我在另一个 *** 线程中发现了这种语法 params=。我的代码在没有中断的情况下编译，所以这可能意味着它有效？但是，我不确定如何在端点检索这个传递的值。

任何帮助将不胜感激。

【问题讨论】：

reacttraining.com/react-router/web/example/url-params

【参考方案1】：

如果您使用的是反应钩子，您可以使用 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 ()

【参考方案2】：

如果你想通过一个路由发送多个参数，你可以这样做。

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>

【参考方案3】：

要通过 Link 组件传递数据，您可能只想在实际链接上接受一个参数。

<Link to=`/b/$_id`>blah blah</Link>

在路线中，你会设置这样的东西

<Route path="b/:id" name="routename" component=foo></Route>

然后您可以通过this.props.match.params.id 访问新路由中的参数

如果你真的不希望你的 id 出现在实际路线中，那就有点烦人了。

【参考方案4】：

传递道具

您可以通过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"

来源

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md

https://github.com/ReactTraining/react-router/issues/4036

【讨论】：

所以当在命名参数之外传递道具时，我想没有办法在props root 访问它们？您必须进入location.state 才能获得它们？

@MegaMatt 是 props.location.state.myPropName

确保用withRouter HOC 包裹你的组件。

使用上述解决方案传递数据时，我总是得到一个未定义的结果。有什么帮助吗？

@MohhamadHasham 这是很重要的一点。 This question 进一步解释。