React Routerへのルーターの追加

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

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

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

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

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

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

  </React.StrictMode>
);

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

main.jsximport {
  createBrowserRouter,
  RouterProvider,
} from 'react-router-dom';

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

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

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

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

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

main.jsximport './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!'と表示されるはずです。