Question

我正在使用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，但似乎没有什么可以做到的。

有什么想法吗？

Answer 1

如上所述here，您可以将对象传递为：

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

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

hash:要放入网址的哈希，例如＃A-散列。

state:声明坚持到该位置。

<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { signupCompleted: true }
}}/>

上面的

是从structured data query service

复制的

现在在Login.js

内

您最初可以将signupCompleted设置为false：

this.state = { signupCompleted: false };

Answer 2

将路线定义如下：

<Route path="/login/:signupCompleted" component={LoginPage} />

链接应该是：

<Link to={`/login/${signupCompleted}`}>Login</Link>

在LoginPage组件中，this.props.match.params.id是signupCompleted的值。

如何使用react route link

2 个答案: