【IT】React Router v6の学習①

T A

2023年6月13日 22:41

皆さま
こんにちは

今日は、React Router v6について学習します。

公式のチュートリアルはこちらとなります。（英語）

今回の内容

１．プロジェクト準備（viteを使用）
２．React Router6のインストール
３．Routerの初期設定
４．Linkの設定
５．NavLinkの設定
６．propsについて
７．Not Foundのページの設定

１．プロジェクト準備（viteを使用）

プロジェクトを作成して初期設定(不要ファイルや不要項目を初期化）を行います。
・プロジェクトの作成
・不要ファイル削除
・不要項目初期化（削除）
の順番で行います。

２．React Router6のインストール

npmコマンドにてreact routerをインストールします。

$ npm install react-router-dom

added 3 packages, and audited 244 packages in 3s

80 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

今回は、
"react": "^18.2.0",
"react-router-dom": "^6.12.1",
を使っております。

３．Routerの初期設定

Router用のディレクトリとファイルを作成します。

$ mkdir src/routers

$ touch src/routers/Home.jsx
$ touch src/routers/About.jsx
$ touch src/routers/Support.jsx

それぞれのファイルを編集します。

http://localhost:5173/aboutへアクセスしたときの表示例

４．Linkの設定

先ほど、インポートしておいたLinkコンポーネントをaタグ代わりに使用して各ページへのリンクを作成します。

リンクが表示されたことを確認します。
aタグではページの移動の度にページ全体のリロードがされますが、
Linkコンポーネントではルーティングで設定したページコンポーネントの箇所のみが更新されます。（読み込みの効率化がされます）

５．NaviLinkの設定

NavLinkコンポーネントを用いることで
どのページのリンクにアクセスしているか判別できる様になります。

判別は「style」の中で変数を設定し、「isActive」変数で受け取れます。
アクセス時は「true」となり、それ以外は、「false」となります。

例

	<NavLink
	style={({ isActive }) => (
		isActive ? { 
		color: 'red', fontWeight: 'bold' 
		} : undefined
	)} 
	to="/" 
	>
	Home
	</NavLink>

６．propsについて

親コンポーネントから子コンポーネントついて値を引き渡したい場合も
通常のReactと同様にpropsにて行うことができます。

例

親コンポーネント
<Route path="/support" element={<Support myname="JIRO"/>} />

子コンポーネント
function Support(props) {
  return (
    <div>
      <h2>Your Support Page</h2> 
      <h1>Hello {props.myname}</h1>
    </div>
  )
}