如何使用反應路線鏈接將參數傳遞給組件

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。 我已經看過Link react-router中的Pass道具 ，但似乎無濟於事。

有任何想法嗎？

Answer 1

如前所述在這里你可以傳遞對象為：

pathname:表示鏈接到的路徑的字符串。

search:查詢參數的字符串表示形式。

hash:放入URL中的哈希，例如＃a-hash。

state:堅持到該位置的狀態。

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

上面是從這里復制的

現在在您的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是this.props.match.params.id的值。