【javascript・react】pushとreplaceの違いについて

お題

pushとreplaceの違いについて

reactで遷移時に使用するpushとreplaceですが、駆け出しの頃はこの二つの違いが

あまりよくわかりませんでした。

事を積んでいくうちに理解ができてきたので二つの違いについて説明していきます。

まずこの二つの共通する点は、両方ともhistory(履歴)に対して効力を及ぼします。

簡単に説明すると

・push: 遷移の度にurlの履歴を残す

・replace: urlに移動する際に、移動先のurl履歴を残さずに遷移する

実際にやってみる

例題としてtopページ・optionページ・profileページを使ってデモをします。

例えば、pushはtop->profile->top->optionと遷移していくと順番にhistoryに履歴が積まれます。

進む：top(push(‘/option’))->option->top(push(‘/profile’))->profile->top

現在の履歴スタックは、’/option’->’/profile’の順番で格納されており、戻る時はこの順番で

戻ります。

戻る：top->profile->option

pushとreplaceが混ざった場合の遷移は以下の流れで遷移します。

進む：top(push(‘/option’))->option->top(replace(‘/profile’))->profile->top

戻る：top->option->top

replaceの場合はtopからprofileに遷移する際にreplaceで遷移をするので、実際にprofileページに

遷移をしても履歴が残りません。

例外として一番最初にreplaceするページに遷移した場合

進む：top(replace(‘/profile’))->profile->top(push(‘/profile’))->option->top

戻る：top->option->top->profile

一番最初にreplaceして遷移した場合、置き換わるページが存在しないので一番最初のhistoryにprofileが

積まれることになる。なので戻った時の最終地点はprofileページになる

まとめ

「戻る」行為をされたら困る時にはreplace、手続きなどに影響がでない場合はpushと使い分け

が重要なapiだと感じました。

特に、replaceはじゃらんアプリのようにホテルを予約したりamazon等の通販サイトのように

カート内の商品の購入を確定した後に戻るのを防止するのが適した使い方だと思います。