web-dev-qa-db-ja.com

react-routerリダイレクトvs history.push

私は react-router-reduxの例 を読んでいて、混乱しました。違いは何ですか：

import { Redirect } from 'react-router-dom'

...

<Redirect to='/login' />

そして

import { Push } from 'react-router-redux'

...

Push('/login')
react-routerreact-router-v4react-router-reduxreact-router-dom
16
tandav

リダイレクト

<Redirect>をレンダリングすると、新しい場所に移動します。新しい場所は、サーバー側のリダイレクト（HTTP 3xx）のようにoverride the current location in the history stack,なります。

一方、履歴

プッシュ関数Pushes a new entry onto the history stack

24
Revansiddh

<Redirect>コンポーネントは、デフォルトでは、現在の場所を履歴スタック内の新しい場所に置き換え、基本的にサーバー側のリダイレクトとして機能します。

ただし、プロパティPushとともに使用することもできます。この場合、history.Pushと同じように機能して、新しいエントリを履歴スタックにプッシュします。

実際、<Redirect>コンポーネントは、舞台裏でhistory Pushおよびreplaceメソッドを使用します。これは単なるReactのナビゲート方法です。

したがって、基本的にナビゲートするには2つの方法があります。

  1. コンポーネントでhistory.Pushとhistory.replaceを使用します（通常はwithRouter HOCでラップされているため、locationオブジェクトにアクセスしなくてもアクセスできます）親から子。

  2. <Redirect>コンポーネントは、Pushプロパティの有無に応じて使用します。

5
Marcos Abreu