React Router
SPA(Single Page Application)
単一ページアプリケーション
ただし、1つの画面だけではありません.各画面に異なるアドレスを付与します.
ルーティング:異なるアドレスに基づいて異なる画面を表示する
-->React Routerライブラリを介してSPAからルーティング可能
短所
アプリケーションが大きいほど、JSファイルは大きくなります
シンプルなルーティングを実現
デフォルトはindexです.htmlでdivのみ
残りはJSでダイナミックにレンダリングされますimport React, { useState } from "react";
import Home from "./Home";
import About from "./About";
import NotFound from "./NotFound";
function App() {
const [comp, setComp] = useState(Home);
return (
<>
<header>
<button onClick={() => setComp(Home)}>Home</button>
<button onClick={() => setComp(About)}>About</button>
<button onClick={() => setComp(NotFound)}>Users</button>
</header>
<hr />
<main children={comp} />
</>
);
}
コンポーネントを切り替えるには、このボタンを押します.
問題が発生!
import React, { useState } from "react";
import Home from "./Home";
import About from "./About";
import NotFound from "./NotFound";
function App() {
const [comp, setComp] = useState(Home);
return (
<>
<header>
<button onClick={() => setComp(Home)}>Home</button>
<button onClick={() => setComp(About)}>About</button>
<button onClick={() => setComp(NotFound)}>Users</button>
</header>
<hr />
<main children={comp} />
</>
);
}->React Router解決!!
React Router
上記の問題を解決するための「標準に近い」ナビゲーション・ライブラリ
使用時にアプリケーションが発行するルーティングは、location、historyなどのブラウザ内蔵APIとよく連携しています.
-->SPAは既存のWebサイトと同じスムーズなルーティングを提供
React Routerのインストール
$ npm i react-router-domコア構成部品
<Link to="/about">About</Link>htmlの-hrefからReference
この問題について(React Router), 我々は、より多くの情報をここで見つけました https://velog.io/@khsfun0312/React-Routerテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol