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

Question

问题:如何通过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线程中找到了这种语法.我的代码编译没有破坏,所以这可能意味着它工作？但是,我不确定如何在端点处检索此传递的值.

任何帮助将不胜感激.

Answer 1

传递道具

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

然后,您可以在链接中传递ID等URL参数to:

<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

Answer 2

要通过链接组件传递数据,您可能只想接受实际链接上的参数.

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

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

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

然后,您可以通过新路径访问参数 this.props.match.params.id

如果你真的不希望你的id在实际路线中,它会变得更加烦人.

Answer 3

如果您使用的是反应钩子，您可以使用useLocation获取从状态对象传递的参数

1. 链接到其他页面

<Link to={{ pathname: `page/${id}`, state: { foo: 'bar'} }}>Click me</Link>

2. 声明一条路线

<Route
  exact
  path={`page/:id`}
  component={BComponent}
/>

3. 获取位置参数，然后获取包含您的键值对对象的使用状态

const BComponent = (props) => {
  const location = useLocation();
  console.log(location.state.foo);

  return ()
}

Answer 4

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

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>