Tailwind Logo

React Router を利用する

関連技術

公開日: 2023-08-29

久しぶりに React での開発をしていると、ここ数年で過去の知識が使えなくなっていました。それくらい普通やろ！って感じかもしれませんが、自分向けのメモということで React Router に関して書いておきます。

URL の取り扱い

前回紹介をした Vite に関して標準的な動きを確認していきます。まだプロジェクトを作っただけでは、URL に /test とか /hello とかを記述しても同じページが表示されます。

reactrouter01.png

URL に合わせてページの内容を変更するのに便利な機能として、React Router があります。今回はこれを利用できるようにしていきます。

モジュールのインストール

インストールは非常に簡単で、以下のようにコマンドラインでインストールを実行してください。

Plain Text 
npm install --save react-router-dom

ファイルの作成

続いて src/routes のフォルダを作成し、以下の3つのファイルを作成します。

TypeScript 
// Home.tsx
import { Link } from "react-router-dom";

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <ul>
        <li><Link to={"/profile"}>Profile</Link></li>
      </ul>
    </div>
  );
};

export default Home;
TypeScript 
// UserProfile.tsx
import { Link } from "react-router-dom";

const UserProfile = () => {
  return (
    <div>
      <h1>User Profile</h1>
      <Link to={"/"}>Home</Link>
    </div>
  );
};

export default UserProfile;
TypeScript 
// NotFound.tsx
import { Link } from "react-router-dom";

const NotFound= () => {
  return (
    <div>
      <h1>Page not found</h1>
      <Link to={"/"}>Home</Link>
    </div>
  );
};

export default NotFound;

続いて App.tsx のファイルを大幅に書き換えました。なお v5 までは Switch で切り替える記述方法でしたが、v6 からは Routes を利用する形となっています。古いサンプルとかの記事も多いのでご注意ください。

TypeScript 
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './routes/Home';
import UserProfile from './routes/UserProfile';
import NotFound from './routes/NotFound';
import Detail from './routes/Detail';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile" element={<UserProfile />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default App;

ではこれで動かすと、まず Home.tsx のデータを元にページが開きます。

reactrouter02.png

Profile のリンクをクリックすると、UserProfile.tsx で記述しているコードを元にページが表示されます。

reactrouter03.png

定義していない URL を直接入力すると NotFound.tsx で記述しているコードで動作します。

reactrouter04.png

URL を利用してページに値を渡す

最後にパラメーターを URL を利用して渡す手順を紹介します。まず、以下のファイルを src/routes の下に作成してください。

TypeScript 
// Detail.tsx
import { Link, useParams } from "react-router-dom";

const Detail = () => {
  const { itemid } = useParams();

  return (
    <div>
      <h1>Detail</h1>
      <p>Item ID: {itemid}</p>
      <Link to={"/"}>Home</Link>
    </div>
  );
};

export default Detail;

また Home.tsx には以下の2行のリンクを追加します。

TypeScript 
        <li><Link to={"/detail/sample"}>Sample 1</Link></li>
        <li><Link to={"/detail/sample2"}>Sample 2</Link></li>

上記のページを有効にするために、

TypeScript 
import Detail from './routes/Detail';
...
        <Route path="/detail/:itemid" element={<Detail />} />

反映させたあとページにアクセスをしてください。Sample 1 をクリックしたときは以下のように変わります。

reactrouter05.png

まとめ

私の持っていた知識が古かったのと、react-router-dom の v5 のブログを見てうまく動かなくて、v6 だとこういう書き方、というのがわかったのでメモとして記載しました。

関連タグ