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');
});
ベストアンサー1
まず、var r = this;this in はif statementコールバック自体のコンテキストを参照しますが、矢印関数を使用しているため、React コンポーネントのコンテキストを参照するため、これを行う必要はありません。
ドキュメントによると:
履歴オブジェクトには通常、次のプロパティとメソッドがあります。
- 長さ - (数値) 履歴スタック内のエントリの数
- action - (文字列) 現在のアクション (PUSH、REPLACE、または POP)
location - (オブジェクト) 現在の場所。次のプロパティを持つことができます:
- パス名 - (文字列) URLのパス
- search - (文字列) URLクエリ文字列
- hash - (文字列) URLハッシュフラグメント
- state - (文字列) この場所がスタックにプッシュされたときに、たとえば push(path, state) に提供された場所固有の状態。ブラウザとメモリ履歴でのみ使用できます。
- push(path, [state]) - (関数) 新しいエントリを履歴スタックにプッシュします
- replace(path, [state]) - (関数) 履歴スタック上の現在のエントリを置き換えます
- go(n) - (関数) 履歴スタック内のポインタをnエントリ分移動する
- goBack() - (関数) go(-1) と同等
- goForward() - (関数) go(1) と同等
- ブロック(プロンプト) - (関数) ナビゲーションを禁止する
ナビゲーション中に、次のように履歴オブジェクトにプロパティを渡すことができます。
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
また、props から history または location オブジェクトを使用する場合は、コンポーネントを に接続する必要があることにも注意してくださいwithRouter。
ドキュメントによると:
ルーター付き
高階コンポーネント
<Route>'sを介して、履歴オブジェクトのプロパティと最も近い一致にアクセスできます。ルートが変更されるたびに、renderと同じプロパティを使用してコンポーネントが再レンダリングされます。withRouterwithRouter<Route>props: { match, location, history }