react-router-dom v6の使い方

react-router-domの基本的な使い方

BrowserRouter, Routes, RouteとLinkをインポートする

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

1. index.tsxで全体をBrowserRouterで囲む
2. App.texでRoutesでRouteを囲む
3. Routeにパスと遷移先を書く

index.tsx

import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

App.tsx

// Linkはaタグみたいものでtoに遷移先を指定して使う
<Link to="/">Homeへ</Link>
<Routes>
  <Route path={`/`} element={<Home />} />
  <Route path={`page1`} element={<Page1 />} />
  <Route path={`page2`} element={<Page2 />} />
</Routes>

Not Foundページの作り方

定義したパスに引っかからない場合全てのパスで表示されるようにワイルドカードを使う

<Routes>
  <Route path={`/`} element={<Home />} />
  <Route path={`/page1`} element={<Page1 />} />
  <Route path={`/page2`} element={<Page2 />} />
  <Route path={`/*`} element={<NotFound />} />
</Routes>

旧バージョンとの違い

RoutesじゃなくてSwitchをインポート

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

React Router v5の使い方も解説しておきます。

<Switch>
  <Route exact path={`/`} component={Home} />
  <Route path={`/page1/`} component={Page1} />
  <Route path={`/page2/`} component={Page2} />
  <Route path={`/*/`} component={NotFound} />
</Switch>

exactをつけないと「/」に一致したものが全てHomeになってしまいます。（前方一致したもの全て)
完全に一致した時以外は対象にしたくないという場合にexactをつける必要があります。

<Route exact path={`/`} component={Home} />

データの受け渡し

Linkのstateプロパティに遷移先に渡したい値をセットします。

import { Link } from "react-router-dom";

// stateに渡したいデータをセットする
<Link to="/home" state={{name: "太郎", age: 21}} />

データの受け取りの方法

import { useLocation } from "react-router-dom";

const Home = () => {
  // useLocation()を使って受け取れる
  const location = useLocation();
  const state = location.state;
  console.log(`${state.name}さんは${state.age}歳です`);  { // 太郎さんは21歳です }
  return <div>Home</div>;
}

ネスト化したルーティング

ページ1の詳細画面としてpage1DetailA、page1DetailBを追加します。

pages
├── home
├── page1
│   ├── page1DetailA
│   └── page1DetailB
└── page2

通常の書き方では各ルートのパスに"page1"を繰り返し書く必要があり、タイプミスが発生する可能性が高くなります。一方で、ルーティングをネストすることでパスの階層構造が視覚的にわかりやすくなり、タイプミスも減らせれます。

// 通常の書き方
<Routes>
  <Route path="page1" element={<Page1 /} />
  <Route path="page1/detailA" element={<Page1DetailA />} />
  <Route path="page1/detailB" element={<Page1DetailB />} />
</Routes>

// ルーティングをネスト化する書き方
<Routes>
  <Route path="page1">
    // indexでデフォルトのページを指定できます。
    <Route index element={<Page1 />} />
    <Route path="detailA" element={<Page1DetailA />} />
    <Route path="detailB" element={<Page1DetailB />} />
  </Route>
</Routes>

Outletについて

react-router-dom v6では、「Outlet」という要素が公開され、ネストされた子コンポーネントを親コンポーネントから表示するためのものです。

App.tex

<Routes>
  <Route path="page2" element={<Page2 />}>
    <Route path="contentsA" element={<Page2ContentsA />} />
    <Route path="contentsB" element={<Page2ContentsB />} />
  </Route>
</Routes>

Page2.tex

const Page2 = () => {
  return (
    <div>
      <header>
        <h1>Page2です！</h1>
      </header>
      <Outlet /> {/* ここにネストされたネストされた子コンポーネントが表示される */}
    </div>
  );
};