React
【React】React Router DOM v6で画面遷移する方法
作成日：2022年02月22日
更新日：2022年02月22日
React Router DOM を使うと、React で簡単に画面遷移することができます。
まずは、ターミナルでプロジェクトのディレクトリに移動し、npm install --save react-router-domを実行します。
現在のバージョンは、6.2.1 です。
App.js に、react-router-comから、BrowserRouter、Routes、Routeをインポートします。
jsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
BrowserRouterとRoutesをラップします。
jsx
**<BrowserRouter>
<Routes>
</Routes>
</BrowserRouter>**
ラップした中に、Route を設定し、パスと表示したいコンポーネントを直接指定します。
jsx
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
</Routes>
</BrowserRouter>
Home 画面と About 画面を確認しましょう。
Home 画面
About 画面
今までは、URL のパスが被る場合、exactが必要でしたが、v6 では exact がデフォルトになりました。
詳細画面を作成する場合は、exactなしで設定できます。
jsx
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
<Route path="about/:id" element={<AboutDetail />} />
</Routes>
</BrowserRouter>
試しに、About 画面の URL の後ろに、『/32』を追加してみましょう。
無事、詳細画面のみ表示されました。
お知らせ
私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。
Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。
詳しくはこちら（Udemyの外部サイトへ遷移します）
