如何使用react route link将参数传递给组件-Java 学习之路

我正在使用react并尝试使用标记链接到另一个页面 . 例如，我想使用参数signupCompleted链接回登录屏幕，如下所示：

<Link to={{ pathname: '/', query: { signupCompleted: true } }}>
    <Button bsStyle="primary" onClick="sendSignupRequest" className="pull-
     right confirm-button-style">Send</Button>
</Link>

我的组件被路由到app.js中的路径：

<Route exact path='/' component={LoginPage} />

在loginPage.js中我尝试在构造函数中到达传递的参数：

this.state = {
      signupCompleted: props.signupCompleted,
    };

但是，这永远不会设置为true . 我看了Pass props in Link react-router，但似乎没有什么可以做的 .

有任何想法吗？

2 回答

0
如上所述Here您可以将对象传递为：

pathname: 表示链接到的路径的字符串 .

search: 查询参数的字符串表示 .

hash: 要放入网址的哈希，例如＃一个哈希 .

state: 国家坚持到该位置 .
```
<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { signupCompleted: true }
}}/>
```
上面是从here复制的

现在你的 Login.js

您最初可以将 signupCompleted 设置为 false ：
```
this.state = { signupCompleted: false };
```
回复于 2024-05-03T16:02:46+08:00
1
将路线定义如下：
```
<Route path="/login/:signupCompleted" component={LoginPage} />
```
链接应该是：
```
<Link to={`/login/${signupCompleted}`}>Login</Link>
```
在LoginPage组件中， this.props.match.params.id 是signupCompleted的值 .
回复于 2024-05-03T16:02:46+08:00

如何使用react route link将参数传递给组件

2 回答

相关问题