web-dev-qa-db-ja.com

React-Router v4-リンクvsリダイレクトvs履歴

他のものよりも何を使用するかについて、いくつかの混乱があるようです。

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

React/Routerを少しの間使用していますが、さまざまな投稿/回答がこれらをいつ使用するかについて異なることを言っており、時には他の人が言ったことと一致しません。だから、これについていくつかの説明が必要だと思う。

Linkとこの documentation について理解していることから：

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

Redirectとこの documentation について理解していることから：

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

私が読んだすべての投稿は、ほとんどすべてのユーザーがRedirectを使用してアプリケーション内を移動しているようで、この post のようにLinkを使用することを推奨する人はいません。

これで、historyは、履歴スタックトレースがあることを除いて、LinkおよびRedirectと同じことができます。

質問1：Link対Redirectを使用したい場合、他のユースケースは何ですか？

質問2：historyはユーザーをアプリ内の別の場所にルーティングできるため、履歴スタックのボーナスが追加されます。常に履歴オブジェクトを使用する必要がありますルーティングするとき？

質問3：アプリのoutsideをルーティングしたい場合、これを行う最適な方法は何ですか？アンカータグ、Window.location.href、リダイレクト、リンク、上記のどれでもない？

reactjsreact-routerreact-router-v4react-router-dom
17
Phillip

まず、このサイトを読むことをお勧めします。
https://reacttraining.com/react-router/web/api/BrowserRouter

React RouterのBrowserRouterは履歴スタックを管理します。つまり、手動で変更する必要はほとんどありません。

しかし、あなたの質問に答えるには：
回答1：ほとんどすべてのユースケースでLinkまたはNavLinkを使用します。 Redirectは特定の状況で役立ちますが、例は、ユーザーが未定義のルートにアクセスしようとしたときに404ページがレンダリングされる場合です。 Redirectは、ユーザーを404ルートから選択した新しいルートにリダイレクトし、履歴スタックの最後のエントリをリダイレクトされたルートに置き換えます。

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

LinkNavLinkおよびRedirectはすべて、内部でルーターの履歴APIを使用します。履歴の代わりにこれらのコンポーネントを使用すると、履歴APIの変更に対して安全です。未来。これらのコンポーネントを使用すると、コードが将来にわたって保証されます。

Answer 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'脆弱性 を防ぐため

12
Mike Abeln