[解決済み] React-Router - リンク vs リダイレクト vs ヒストリー

質問

どちらを使うか迷うことがあるようです。

• <Link to='/some/path'>
• <Redirect to='/some/path'/>
• history.push('/some/path')

私は少し前からReact/Routerを使用していますが、異なる投稿/回答は、これらを使用するタイミングに関して異なることを言っており、時には他の誰かが言ったことと一致しないことがあります。だから、私はこれについていくつかの明確化が必要だと思います。

について私が理解しているところでは Link と、この ドキュメント それ

アプリケーションの周りに宣言的でアクセス可能なナビゲーションを提供します。

について私が理解しているところでは Redirect と、この ドキュメント それ

新しい場所に移動します。新しい場所は、サーバサイドリダイレクト (HTTP 3xx) が行うように、履歴スタックで現在の場所を上書きします。

私が読んだすべての投稿のように、ほとんど誰もが Redirect を使うことを推奨しているようですが、誰も Link のように ポスト .

現在 history と同じことができます。 Link と Redirect を使用した場合、履歴のスタックトレースが表示されます。

質問1: どのような場合に Link 対 Redirect とでは、どのような使い分けがあるのでしょうか？

質問2: から history は、履歴スタックの追加ボーナスでユーザーをアプリ内の別の場所にルーティングできるので、ルーティングするときは常に履歴オブジェクトを使用すればよいのでしょうか？

質問3: もし私が の外側 の外にルーティングしたい場合、どのような方法が一番良いでしょうか？アンカー タグ、Window.location.href、Redirect、Link、上記のどれでもない？

どのように解決するのですか？

まず、このサイトに目を通すことを強くお勧めします。

https://reacttraining.com/react-router/web/api/BrowserRouter

React Routerの BrowserRouter は履歴スタックを維持するので、手動で修正する必要はほとんどありません。

しかし、あなたの質問に答えるために

回答1 あなたは Link または NavLink を使うことができます。 Redirect は特定の状況では便利ですが、例えば、ユーザーが未定義のルートにアクセスしようとしたときに 404 ページがレンダリングされる場合です。そのため Redirect はユーザーを 404 ルートからあなたが選んだ新しいルートにリダイレクトし、履歴スタックの最後のエントリをリダイレクトされたルートに置き換えます。

これは、ユーザーがブラウザーの戻るボタンを押しても、404 ルートに戻ることができないことを意味します。

Link NavLink そして Redirect はすべてルータの履歴 API を使用しており、 手動で履歴を作成する代わりにこれらのコンポーネントを使用することで、 将来履歴 API に変更があった際にも安全に対応できます。これらのコンポーネントを使用することで、将来にわたってあなたのコードを保護することができます。

回答2: BrowserRouter あなたのために履歴スタックを維持します。一般的に私の意見は、あなたができる限り手動でそれを更新することから離れたいことです。

回答3 外部反応リンクの例をいくつか挙げておきます。

<Route path='/external' component={() => window.location = 'https://external.com/path'}/>

<a href='https://external.com/path' target='_blank' rel='noopener noreferrer'>Regular Anchor tags work great</a>

target='_blank' は新しいタブでリンクを開きますが、その際に必ず rel='noopener noreferrer' を記述してください。 脆弱性