react-router v4でhistory.push / Link / Redirectを使用してパラメーターを渡す方法は？

this.props.history.push('/page')React-Router v4でどのようにパラメーターを渡すことができますか？

.then(response => {
       var r = this;
        if (response.status >= 200 && response.status < 300) {
             r.props.history.push('/template');
          });

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

ドキュメントによると：

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

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

• location-（オブジェクト）現在の場所。次のプロパティがあります。

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

したがって、ナビゲート中に、次のように小道具を履歴オブジェクトに渡すことができます

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

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

使用できます

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

次に/template、次のコードを使用して、コンポーネントから解析済みデータにアクセスできます。

const state = this.props.location.state

React Session History Managementの詳細を読む

• 以下のための以前のバージョン：

  history.push('/path', yourData);

  以下のように関連コンポーネントのデータを取得します。

  this.props.location.state // it is equal to yourData

• 以下のために、新しいバージョンで上記の方法がうまく動作しますが、新しい方法があります：

  history.push({
    pathname: '/path',
    customNameData: yourData,
  });

  以下のように関連コンポーネントのデータを取得します。

  this.props.location.customNameData // it is equal to yourData

ヒント：stateキー名は以前のバージョンで使用されていました。新しいバージョンでは、カスタム名を使用してデータを渡すことができ、名前の使用stateは必須ではありません。

Reactフックで使用するためにソリューションを拡張する（Shubham Khatriが推奨）（16.8以降）：

package.json (always worth updating to latest packages)

{
     ...

     "react": "^16.12.0",
     "react-router-dom": "^5.1.2",

     ...
}

履歴プッシュでパラメーターを渡す：

import { useHistory } from "react-router-dom";

const FirstPage = props => {
    let history = useHistory();

    const someEventHandler = event => {
       history.push({
           pathname: '/secondpage',
           search: '?query=abc',
           state: { detail: 'some_value' }
       });
    };

};

export default FirstPage;

'react-router-dom'のuseLocationを使用して、渡されたパラメーターにアクセスします。

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

const SecondPage = props => {
    const location = useLocation();

    useEffect(() => {
       console.log(location.pathname); // result: '/secondpage'
       console.log(location.search); // result: '?query=abc'
       console.log(location.state.detail); // result: 'some_value'
    }, [location]);

};

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

Tyler McGinnisのサイトに投稿の説明が掲載されています。投稿へのリンク

ここにコード例があります：

1. history.pushコンポーネントで：

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

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

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

3. ホームコンポーネント：

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

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メソッドを含むオブジェクト。

使用するに16.8+（withHooks）と反応しますが、この方法を使用することができます

import React from 'react';
import { useHistory } from 'react-router-dom';

export default function SomeFunctionalComponent() {
let history = useHistory(); // should be called inside react component

const handleClickButton = () => {    
"funcionAPICALL"
       .then(response => {
             if (response.status >= 200 && response.status < 300) {
                 history.push('/template');
              });
}

return ( <div> Some component stuff 
    <p>To make API POST request and redirect to "/template" click a button API CALL</p>
    <button onClick={handleClickButton}>API CALL<button>
</div>)
} 

詳細はこちらのソースhttps://reacttraining.com/react-router/web/example/auth-workflow

クエリパラメータを取得するための情報を追加します。

const queryParams = new URLSearchParams(this.props.location.search);
console.log('assuming query param is id', queryParams.get('id');

URLSearchParamsの詳細については、このリンクを確認してください URLSearchParams