【React備忘録】React Router v6のルーティング

◆ 使用環境

オンラインエディタ「code sandbox」を使用。

バージョンはそれぞれ以下の通り。

◆ 基本ルーティング

① BrowserRouterの設定

index.jsで、react-router-domのBrowserRouterコンポーネントをインポートし、
App.jsを囲む。（必須設定）

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

② ルーティング設定

・ コンポーネントの設定

Source

// Home.jsx
export default function Home() {
  return (
    <div>
      <h1>HOME</h1>
    </div>
  );
}

// Page1.jsx
export default function Page1() {
  return (
    <div>
      <h1>PAGE1</h1>
    </div>
  );
}

// Page2.jsx
export default function Page2() {
  return (
    <div>
      <h1>PAGE2</h1>
    </div>
  );
}

・ App.jsでルーティング

Source

import "./styles.css";
import { Routes, Route, Link } from "react-router-dom";
import Home from "./components/Home";
import Page1 from "./components/Page1";
import Page2 from "./components/Page2";

export default function App() {
  return (
    <div className="App">
      <Link to="/">HOME</Link>
      <br />
      <Link to="page1">PAGE1</Link>
      <br />
      <Link to="page2">PAGE2</Link>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
      </Routes>
    </div>
  );
}

【機能の解説】

【 Link 】

HTMLのaタグ。to=""で飛ばすパスを設定するコンポーネント。

【 Routes 】

Linkで設定したパスごとに表示するルーティングの出しわけを行うためのコンポーネント。

【 Route 】

ルーティングで表示したいコンポーネントとそのパスを設定するコンポーネント。

ロジックとしては、

①Linkタグでパスを飛ばす

②Routesが選別

②Routeで設定したパスに該当するコンポーネントが表示される

という流れ。

◆ ルーティングのネスト化

Page1を親ページとして、子ページPage1DetailsAとPage1DetailsBを用意する。

このコンポーネント内にさらにコンポーネントがある状態をネストという。
このネスト化されたページを表示するには以下の設定が必要。

① 子コンポーネントのページのパスを飛ばす用のLinkを設定

Page1.jsx

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

export default function Page1() {
  return (
    <div>
      <h1>PAGE1</h1>
      <Link to="/page1/detailsA">Page1DetailsA</Link>
      <br />
      <Link to="/page1/detailsB">Page1DetailsB</Link>
    </div>
  );
}

② ルーティング設定

App.jsx

import "./styles.css";
import { Routes, Route, Link } from "react-router-dom";
import Home from "./components/Home";
import Page1 from "./components/Page1";
import Page2 from "./components/Page2";
import Page1DetailsA from "./components/Page1DetailsA";
import Page1DetailsB from "./components/Page1DetailsB";

export default function App() {
  return (
    <div className="App">
      <Link to="/">HOME</Link>
      <br />
      <Link to="page1">PAGE1</Link>
      <br />
      <Link to="page2">PAGE2</Link>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1">
          <Route index={true} element={<Page1 />} />
          <Route path="/page1/detailsA" element={<Page1DetailsA />} />
          <Route path="/page1/detailsB" element={<Page1DetailsB />} />
        </Route>
        <Route path="/page2" element={<Page2 />} />
      </Routes>
    </div>
  );
}

・ ポイント

ネスト化しているコンポーネントをRouteコンポーネントで囲う

<Route path="/page1">
...
</Route>

Page1コンポーネントを表示するRouteコンポーネントのindex属性をtrueに

<Route path="/page1">
    <Route index={true} element={<Page1 />} />
</Route>

子ページのコンポーネントを設定

<Route path="/page1">
    <Route index={true} element={<Page1 />} />
    <Route path="/page1/detailsA" element={<Page1DetailsA />} />
    <Route path="/page1/detailsB" element={<Page1DetailsB />} />
</Route>

◆ URLパラメータを取得

URLに設定したパラメータを取得する方法は以下の通り。

① コンポーネント作成

UrlParameter.jsx

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

export default function UrlParameter() {
  const { id } = useParams();

  return (
    <div>
      <h1>PAGE2</h1>
      <p>URL PARAMETER is {id}</p>
    </div>
  );
}

ポイント

useParamsという関数を利用することで、パラメータを取得することが可能になる。

②　親コンポーネントでリンク設定

Page2.jsx

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

export default function Page2() {
  return (
    <div>
      <h1>PAGE2</h1>
       // パラメータで100を渡す
      <Link to="/page2/100">URL Parameter</Link>
    </div>
  );
}

③　App.jsでルーテング設定

App.jsx

import "./styles.css";
import { Routes, Route, Link } from "react-router-dom";
import Home from "./components/Home";
import Page1 from "./components/Page1";
import Page2 from "./components/Page2";
import Page1DetailsA from "./components/Page1DetailsA";
import Page1DetailsB from "./components/Page1DetailsB";
import UrlParameter from "./components/UrlParameter";

export default function App() {
  return (
    <div className="App">
      <Link to="/">HOME</Link>
      <br />
      <Link to="page1">PAGE1</Link>
      <br />
      <Link to="page2">PAGE2</Link>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page1">
          <Route index={true} element={<Page1 />} />
          <Route path="/page1/detailsA" element={<Page1DetailsA />} />
          <Route path="/page1/detailsB" element={<Page1DetailsB />} />
        </Route>
        <Route path="/page2">
          <Route index={true} element={<Page2 />} />
          <Route path=":id" element={<UrlParameter />} />
        </Route>
      </Routes>
    </div>
  );
}

ポイント

:値とpathに設定することで、パラメータとして値が設定されるようになる。
今回はidとして設定したため、UrlParameterコンポーネントで取得する値もidということになる。

const { id } = useParams();

◆ クエリパラメータの取得

①クエリパラメータ取得用コンポーネントの作成

・ QueryParameter.jsx

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

export const QueryParameter = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const name = searchParams.get("name");
  return (
    <div>
      <h1>QueryParameter</h1>
      <p>Query parameter is {name}</p>
    </div>
  );
};

ポイント

useSearchParamsという関数を利用する。
searchParamsのgetメソッドを利用することで、クエリパラメータに設定した値を取得する。

②親コンポーネントから呼び出し

今回はPage2コンポーネントから呼び出し、クエリパラメータを取得。

・Page2.jsx

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

export const Page2 = () => {
  return (
    <div>
      <h1>Page2のページ</h1>
      <Link to="/page2/100">UrlParameter</Link>
      <br />
      <Link to="/page2/query?name=hello">QueryParameter</Link>
    </div>
  );
};

?name=helloでnameに値を設定。

③App.jsでルーティング設定

・ App.jsx

<Route path="/page2">
    <Route index={true} element={<Page2 />} />
    <Route path=":id" element={<UrlParameter />} />
    <Route path="/page2/query" element={<QueryParameter />} />
</Route>

◆ stateの取得

子コンポーネントに対し、変数の値を渡す方法。

①stateを受け取るコンポーネントの設定

・Page1DetailAコンポーネント

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

export const Page1DetailA = () => {
  const { state } = useLocation();
  return (
    <div>
      <h1>Page1DetailAのページ</h1>
      {state != null ? (
        <ul>
          {state.map((arr) => {
            return <li key="arr">{arr}</li>;
          })}
        </ul>
      ) : (
        ""
      )}
    </div>
  );
};

ポイント

useLocation関数を使用し、stateを取得する。

今回はstateに配列を渡し、配列分リストを表示する想定でコードを記入。

②親コンポーネントからstateを受け渡し

Page1.jsx

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

export const Page1 = () => {
  const arr = [...Array(10).keys()];
  return (
    <div>
      <h1>Page1のページ</h1>
      <Link to="/page1/detailA" state={arr}>
        DetalilA
      </Link>
      <br />
      <Link to="/page1/detailB">DetalilB</Link>
    </div>
  );
};

ポイント

Linkコンポーネントに対し、state={}で受け渡す変数を設定する。

結果は以下の通り。

◆ Linkコンポーネントを使用しないページ遷移

Linkコンポーネントを使用せずに遷移する場合には、以下の手順で設定する。

今回の例では、ボタンを押したら遷移することを想定。

navigate関数を使用

useNavigate関数を使用し、遷移するページを設定。

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

export const Page1 = () => {
  const navigate = useNavigate();
  return (
    <div>
      <h1>Page1のページ</h1>
      <button onClick={() => navigate("/page1/detailA")}>DetailA</button>
      <br />
      <Link to="/page1/detailB">DetalilB</Link>
    </div>
  );
};

この設定でLinkコンポーネントと同じようにページ遷移が可能。

◆ 404ページの作成

存在しないリンクにアクセスした場合のページ（４０４ページ）の作成は以下の通り。

① コンポーネントの作成

NotFound.jsx

export const NotFound = () => {
  return <p>存在しないページです</p>;
};

② ルーティングの設定

App.jsx

import { NotFound } from "../NotFound";

export const Router = () => {
  return (
    <Routes>
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
};

ポイント

Routeコンポーネントのpathを*（アスタリスク）で設定する。