Question

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

这是我的意思：假设我们在/ a页上。该链接会将用户带到/ b。因此。现在，我需要通过链接将名称从/ a传递到/ b。

如何在反应路由中通过链接将多个数据从一个组件传递到另一个组件？

Answer 1

传递道具

您可以通过状态对象将任意道具传递到路线：

<Link to={{ pathname: '/route', state: { foo: 'bar'} }}>My route</Link>

然后，您可以从组件内部访问状态对象：

const {foo} = props.location.state

console.log(foo) // "bar"

从https://stackoverflow.com/a/45599159/1826429复制

Answer 2

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

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 3

创建一个新对象，并以字符串形式提供路线和参数

A_n = np.array(A_n)

A_sliced = A_n[[slice(i) for i in v_n]]

const newTo = { pathname: "/newRoute", param1: `${firstName}`, param2: `${lastName}`, param3: `${email}` };

现在在路线的接收端

<Link to={newTo} >

在链接上传递多个数据，单击reactjs

3 个答案: