Question

问题：如何通过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={}。我的代码编译没有破坏，所以这可能意味着它工作？但是，我不确定如何在端点处检索此传递的值。

非常感谢任何帮助。

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} />

然后，您可以在链接to中传递ID参数，例如ID：

<Link to={`route/foo`}>My route</Link>

您可以通过match对象访问组件中的参数：

const {id} = props.match.params

console.log(id) // "foo"

来源

Answer 2

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

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

在路线中，你会设置类似的东西

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

然后，您可以通过this.props.match.params.id

访问新路线中的参数

如果你真的不想在实际路线中使用你的身份，那会更烦人。

Answer 3

如果您要通过一条路线发送多个参数，可以这样做。

1.Link元素

<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>

Answer 4

如果您使用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 ()
}

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

4 个答案: