ReduxアプリケーションへのReact Routerのインストール

前回のレッスンでは、Reduxを扱うための基本的なツールをインストールしました。多くの場合、アプリケーションにはそのウェブページ間をナビゲートするためのルーターが必要であり、私たちのアプリケーションも例外ではありません。このため、 React Router ライブラリをインストールします。

プロジェクトを開き、ターミナルで次のコマンドを入力します：

npm install react-router-dom

少し先取りして言うと、私たちの Reduxアプリケーションは伝統的に、ある販売者によって情報が掲載される製品に関するものになります。したがって、今からメインコンポーネントの Appを少しリファクタリングし、また、ルーティング機能を実装するための機能をアプリケーションに追加します。

まず、srcフォルダに入り、次にappフォルダに入って、ここにroot.jsxファイルを作成します。これはサイトのルートになります：左側にメニュー、右側にコンテンツ（現時点ではタイトルのみ）を配置します：

function Root() {
	return (
		<div id="main">
			<div id="menu">
				<nav>
					<a>製品</a>
					<a>販売者</a>
				</nav>
			</div>
			<div id="main_page">
				<h2>これは私の初めてのReduxアプリケーションです！</h2>
				<hr></hr>
			</div>
		</div>
	)
}

export default Root

そして、Appコンポーネントをリファクタリングします。まず、その内容を完全に削除します。次に、ルーター用の2つの関数とルートコンポーネント Rootをインポートします：

import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Root from './app/root'

インポートの後に、ルーターを作成し、最初のルートを設定します。Rootを表示要素として渡し、対応するパスを '/'に設定します。今後、Appには他の必要なルートも追加していきます：

const router = createBrowserRouter([{ path: '/', element: <Root /> }])

次に、App関数のコードを記述します：

function App() {
	return <RouterProvider router={router} />
}

export default App

以上です。起動します。次のセクションでは、Reduxアプリケーションを動作させるためのコンポーネントを実装します。

最後に、少しスタイルを追加して見た目を整えます。 index.cssにスタイルを記述します：

body {
	font-size: 24px;
	line-height: 1.5;
}

nav {
	display: flex;
	flex-direction: column;
}

ul {
	list-style: none;
	padding: 0;
}

h1, h2, h3 {
	margin: 0;
}

a {
	text-decoration: none;
	color: blue;
	cursor: pointer;
}

#main {
	display: flex;
	margin: 20px;
}

#menu {
	margin-right: 50px;
	padding-top: 50px;
	padding-right: 50px;
	border-right: 2px solid lightgray;
	font-weight: bold;
}

あなたのアプリケーションにReact Routerを追加してください。

あなたのアプリケーションが、教員が情報を掲載する学生に関するものだとします。これを考慮して、ルートコンポーネントRootを作成してください。Appコンポーネントをレッスンで説明したようにリファクタリングしてください。