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

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

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

terminalnpm install react-router-dom

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

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

app/root.jsxfunction 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をインポートします：

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

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

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

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

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

export default App

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

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

index.cssbody {
  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;
}