React Routerへのルーターの追加

ルーターについて少し学んだので、アプリケーションに一つ追加してみましょう。

しかし、まずは前回のレッスンで作成したアプリケーションのテンプレートを少し整理する必要があります。具体的には、srcフォルダを整理します。このフォルダからassetsフォルダ、 App.cssファイル、App.jsxファイルを削除してください。結局、残るのはmain.jsxとindex.cssだけになります。

index.cssを開き、完全にクリアしてください。空の状態にします。

次に、メインファイルのmain.jsxを扱います。これには以下のコードを記述します：

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>

	</React.StrictMode>
);

これでルーターを追加できます。 Webアプリケーションで最もよく使われるのは BrowserRouterなので、これを使用します。モダンな構文も忘れずに。インポート文を追加しましょう：

import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

次に、定数routerを定義し、インポート文の後にBrowserRouterを作成します。トップページに'Hello Router!'というテキストのdivが表示されるようにします。そのために、トップページへのパスと表示する要素を定義します：

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello Router!</div>,
	},
]);

さらに、RouterProviderコンポーネントを追加し、上記で作成したルーターを渡す必要があります。このコンポーネントはすべてのルーターオブジェクトを受け取り、アプリケーションをレンダリングし、他のAPIを接続します：

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

完全なコードは以下のようになります：

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
	createBrowserRouter,
	RouterProvider,
} from 'react-router-dom';

const router = createBrowserRouter([
	{
		path: '/',
		element: <div>Hello world!</div>,
	},
]);

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);

変更を保存しましょう。おめでとうございます！私たちのアプリケーションはもうエラーを吐きません。これを起動すると、ブラウザのトップページに 'Hello Router!'と表示されるはずです。

ここで学んだ内容を使って、過去のレッスンの宿題で作成したあなたのアプリケーションのトップページに、'I'm number one in React!'というテキストの段落が表示されるようにしてください。