React Router DOM を使うと、React で簡単に画面遷移することができます。

まずは、ターミナルでプロジェクトのディレクトリに移動し、npm install --save react-router-domを実行します。

image2

現在のバージョンは、6.2.1 です。

App.js に、react-router-comから、BrowserRouterRoutesRouteをインポートします。

import { BrowserRouter, Routes, Route } from "react-router-dom"

BrowserRouterRoutesをラップします。

**<BrowserRouter>
  <Routes>

  </Routes>
</BrowserRouter>**

ラップした中に、Route を設定し、パスと表示したいコンポーネントを直接指定します。

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="about" element={<About />} />
  </Routes>
</BrowserRouter>

Home 画面と About 画面を確認しましょう。

Home 画面

image3

About 画面

image4

今までは、URL のパスが被る場合、exactが必要でしたが、v6 では exact がデフォルトになりました。

詳細画面を作成する場合は、exactなしで設定できます。

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="about/:id" element={<AboutDetail />} />
  </Routes>
</BrowserRouter>

試しに、About 画面の URL の後ろに、『/32』を追加してみましょう。

image5

無事、詳細画面のみ表示されました。

ブログ一覧