Achievement Goal
1.ルーティングの概念を理解する.
2.React Router DOMのコンポーネントを使用できます.

Router

出発地から目的地までの経路を特定する機能

アドレスに従って異なるビューを表示するプロセス「パスによる変更」.これはルーティングを意味する.

は、ある画面(ビュー)から別の画面に切り替えるナビゲーション機能

を管理する.

は、ユーザが要求したURLまたはイベントを解釈し、新しいページを切り替えるためのデータを取得するために、一連のサーバにデータを要求し、画面を切り替える動作を有する.

BrowserRouter

Switch

Route -> exact path ? path ?

Link -> to

これまでSPAは1ページでのみ変更が必要な構成部品を操作していたが,操作後に新しいページに移動することが多かった.
したがって,新しいページに移動するアドレスも変化し,ルーティングと呼ぶ.
反応器自体にはこの機能がないため,反応器ライブラリをインストールし,開発者が直接アドレスを提供する必要がある.

npm install react-router-dom

ルータの4つの主要コンポーネント

1. BrowserRouter

ルーターの主な機能.始点から目的地までの配線素子
正常に動作するには、ブラウザに入れます.

2.Switch

パスに一致する機能.
スイッチコンポーネントは、複数のルーティングを囲むことができ、1つのルーティングが一致するルータのみをレンダリングします.
スイッチが無効な場合は、一致するすべての要素が表示されます.

3.Route

パスをマッチングする機能は、私がずっと学んできたスイッチを親とし、よく一緒にいます.
Routeはpath属性とともに使用され、次のリンク属性とアドレスを一致させるために使用されます.
exact path? path?
Routeで使用されるプロパティpathは、最初のパスが「/」で、下のパスが「/anotherPage」の場合、/繰り返しが発生するため移動できません.
この場合、exceptpath="/"を一番上に記入し、正しい"/"で一致させるだけです.

4.Link

パスの機能を変更することで、Switch>Routeで指定したアドレスを作成できます.
ここに記入してこそ、移動できます.属性はtoです.

ページ切り替えにより、アプリケーションをそのままにし、HTML 5 History APIのみでページアドレスを変更できます.

ReactDOMを使用してレンダリングすると、リンク要素はaラベルになります.

<Link to '/'>

AラベルではなくReactRouterでリンクを使用する理由は何ですか?
aタグは、ページ切り替え中にページが読み込まれるため、最初からレンダリングを再開します.
つまり、リフレッシュ現象が発生します.
しかし、リンクコンポーネントは、ページの切り替えを防ぐ機能を内蔵しているため、SPAを実装することができます.