web-dev-qa-db-ja.com

履歴/プッシュ/リンク/リダイレクトでパラメータを渡るにはどうすればいいですか？

React-Router v4でthis.props.history.Push('/page')を使ってどのようにパラメータを渡せますか？

.then(response => {
       var r = this;
        if (response.status >= 200 && response.status < 300) {
             r.props.history.Push('/template');
          });
reactjsreact-router
97
IshanGarg

まず第一に、var r = this;内のこれはコールバック自身のコンテキストを参照するのでif statementを行う必要はありません。これはarrow関数を使用しているのでReactコンポーネントコンテキストを参照するためです。

ドキュメントによると：

履歴オブジェクトには通常、次のプロパティとメソッドがあります。

  • length - （数）履歴スタックのエントリ数
  • action - （文字列）現在のアクション（Push、REPLACE、またはPOP）

  • location - （オブジェクト）現在の場所。次のような性質があります。

    • pathname - （文字列）URLのパス
    • search - （文字列）URLクエリ文字列
    • hash - （文字列）URLハッシュフラグメント
    • state - （文字列）ロケーション固有の状態。この場所がスタックにプッシュされたときに（path、state）をプッシュします。ブラウザとメモリの履歴でのみ利用可能です。
  • Push（path、[state]） - （関数）新しいエントリを履歴スタックにプッシュする
  • replace（path、[state]） - （関数）履歴スタック上の現在のエントリを置き換える
  • go（n） - （関数）履歴スタック内のポインタをnエントリ分移動します
  • goBack（） - （関数）go（-1）と同等
  • goForward（） - （関数）go（1）と同じです。
  • block（プロンプト） - （ファンクション）ナビゲーションを禁止します

そのため、ナビゲートしながら、履歴オブジェクトに小道具を渡すことができます。

this.props.history.Push({
  pathname: '/template',
  search: '?query=abc',
  state: { detail: response.data }
})

LinkコンポーネントまたはRedirectコンポーネントの場合も同様です。

<Link to={{
      pathname: '/template',
      search: '?query=abc',
      state: { detail: response.data }
    }}> My Link </Link>

/templateルートでレンダリングされたコンポーネントでは、次のように渡された小道具にアクセスできます。

this.props.location.state.detail

また、小道具の履歴オブジェクトや場所オブジェクトを使用する場合は、コンポーネントをwithRouterに接続する必要があることにも注意してください。

ドキュメントに従って：

withRouter

withRouter高次コンポーネントを介して、履歴オブジェクトのプロパティと最も近い<Route>'sの一致にアクセスすることができます。 withRouterは、<Route> render props: { match, location, history }と同じプロップで経路が変わるたびにそのコンポーネントを再レンダリングします。

223
Shubham Khatri

URLパラメータを渡す必要がある場合

彼のサイトにTyler McGinnisによる素晴らしい投稿の説明があります、 投稿へのリンク

これがコード例です。

  1. history.Pushコンポーネントについて

    this.props.history.Push(/home:${this.state.userID})

  2. ルータコンポーネントでは、ルートを定義します。

    <Route path='/home:myKey' component={Home} />

  3. Homeコンポーネント上

    componentDidMount(){ const { myKey } = this.props.match.params console.log(myKey ) }

2
shyke

使えます

this.props.history.Push("/template", { ...response })またはthis.props.history.Push("/template", { response: response })

次のコードで/ templateコンポーネントからパースされたデータにアクセスできます。

this.props.location.state

1
Tenusha

WithRouterを使用する必要はありません。これは私のために働く：

親ページでは、

<BrowserRouter>
   <Switch>
        <Route path="/routeA" render={(props)=> (
          <ComponentA {...props} propDummy={50} />
        )} />

        <Route path="/routeB" render={(props)=> (
          <ComponentB {...props} propWhatever={100} />
          )} /> 
      </Switch>
</BrowserRouter>

それからComponentAかComponentBであなたはアクセスすることができます

this.props.history

this.props.history.Pushメソッドを含むオブジェクト.

0
joedotnot