[CS] React Router Day-20

npm install react-router-dom

SPAとルーティング

SPAは1ページしか表示されませんが、実際には1画面だけではありません.
各ページには異なる画面がありますが、共通しています.
重要なのは、各ページのアドレスが異なり、ビューが表示されるとパスが変化することです.これはRoutingです
必要に応じて、アドレスごとに異なるビューを表示する必要があります.

React Router

最も多く使用されるライブラリはReact Routerでルーティングされます.

import {BrowserRouter, Switch, Route, Link} from "react-router-dom";

importでは、必要なモジュールを読み込み、非構造化割り当て(destructuring assignment)と同様にできます.

React Routerの利用

Browser Router:ルータロール

スイッチ:パスマッチング

ルーティング:マッチングパス

リンク:パス

を変更する

Switch, Route

パスに一致する構成部品として機能します.
スイッチコンポーネントは、複数のルーティングを囲み、1つのパスが一致するルータのみをレンダリングできます.
スイッチを使用しない場合は、一致するすべての要素がレンダリングされます.
Route構成部品パスに表示する構成部品を指定するには、Pathプロパティを指定します.リンク構成部品が定義したURLパスと一致している場合にのみ機能します.

Link

パスを接続する構成部品.HTML 5 History APIを使用すると、ページ切り替えでページを再ロードすることなく、ページアドレスのみが変更されます.
RealtDOMレンダリングを使用すると、リンク要素はaラベルになります.