如何使用反应路由链接将参数传递给组件答案

【问题标题】：how to pass parameters to component using react route link如何使用反应路由链接将参数传递给组件
【发布时间】：2018-02-24 20:30:10
【问题描述】：

我正在使用 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，但似乎没有任何效果。

有什么想法吗？

【问题讨论】：

query: { signupCompleted: true } 在做什么？它是查询参数的字符串表示形式还是持久到该位置的查询？你使用的是哪个版本的react-router-dom
@Aaqib 假设用于指示登录页面是否已从按标签所在的注册按钮重定向，它假设为布尔值。我正在运行 react-router-dom 的 4.2.2 版

标签： javascript reactjs react-router

【解决方案1】：

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

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

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

hash: 要放入 URL 的哈希值，例如#a 哈希。

state: 状态持续到该位置。

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

以上内容抄自here

现在在你的Login.js中

您可以将signupCompleted 设置为false：

this.state = { signupCompleted: false };

【讨论】：

感谢@Aaqib 的回答！我已将链接更改为并且在我的 login.js 中有 this.state = { signupCompleted: false};但是它似乎仍然没有将变量设置为 true。
你能在你使用 Link 的地方展示你的组件吗？
我只有一个 signupPage.js，在 render() 方法中我有一个带有引导按钮的 Link 标签，如下所示：路由都在主应用程序中声明。 js 组件：render() { return ( ); }
你在哪里声明this.state = {{ signupCompleted: false }
登录页面的构造函数中：constructor(props, context) { super(props, context); this.state = { signupCompleted: false, }; }

【解决方案2】：

如下定义路线：

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

链接应该是：

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

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

【讨论】：