react-router-domを簡単に解釈する

## react-router-domとは
react-router-domは、React用の`サードパーティ製ルーティングライブラリ`で、`シングルページアプリケーション(SPA)のページ遷移をページのリロードなしに実現できる`便利なツールです。
また、ウェブアプリケーション専用に設計された`react-routerの拡張版`であり、ブラウザベースの環境に最適化された追加機能を備えています。
react-router-domをインストールすることで、`react-router` のコア機能に加えて、ウェブ特有の機能（例えば、`<Link>`、`<BrowserRouter>` など）を利用できます。

::: note
この記事は、React Router v6を前提にしております。
:::

## react-router-domのセットアップ
### パッケージのインストール
まず、プロジェクトに `react-router-dom` ライブラリをインストールします。プロジェクトのルートディレクトリで以下のコマンドを実行してください。

```zsh
npm install react-router-dom
```

TypeScriptなら以下のようになります。

```zsh
npm install react-router-dom @types/react-router-dom
```

このコマンドは、`react-router-dom` およびその依存関係をプロジェクトに追加します。

## 実装例
### ルーティングの設定
次に、アプリケーションのルーティングを設定します。`react-router-dom` から `BrowserRouter`、`Routes`、`Route`、`Link` コンポーネントをインポートし、アプリケーションの異なる部分へのルーティングを定義します。

ディレクトリ構成は以下になります。
```:ディレクトリ構成
my-app/
├── public/
│   └── index.html
├── src/
│   ├── components/        # 再利用可能なUIコンポーネント
│   │   └── navBar.tsx      # ナビゲーションバー コンポーネント
│   ├── pages/             # 各ページを表すコンポーネント
│   │   ├── home.tsx        # Home ページ コンポーネント
│   │   └── about.tsx       # About ページ コンポーネント
│   ├── App.tsx             # アプリケーションのルートコンポーネント
│   └── main.tsx           # アプリケーションのエントリーポイント
└── package.json           # プロジェクトのメタデータと依存関係
```

そして、以下は、基本的なルーティングの設定例です。

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

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

```tsx:App.tsx
import { Routes, Route } from 'react-router-dom';
import { NavBar } from './NavBar';
import { Home } from './Home';
import { About } from './About';

const App = () => {
  return (
    <Routes>
      <NavBar /> {/* ナビゲーションバーを挿入 */}
      {/* ルート定義 */}
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} /> 
      {/*
      react-router-dom v6以前では、Componentが使われていた
      <Route path="/"  Component={Home} />
      <Route path="/about" Component={About} />
      */}
    </Routes>
  );
};

export default App;
```

```tsx:navBar.tsx
import {FunctionComponent} from 'react';
import { Link } from 'react-router-dom';

const NavBar: FunctionComponent = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
  );
};

export default NavBar;
```

```tsx:home.tsx
import {FunctionComponent} from 'react';

const Home: FunctionComponent = () => {
  return <h2>Home</h2>;
};

export default Home;
```

```tsx:about.tsx
import {FunctionComponent} from 'react';

const About: FunctionComponent = () => {
  return <h2>About</h2>;
};

export default About;
```

このコード例では、`react-router-dom` を使用して、ユーザーがブラウザのURLバーを通じてアクセスする各ページ（「Home」と「About」）へのルーティングを実装しています。

ユーザーが「/」のURLにアクセスすると「Home」ページが、そして「/about」のURLにアクセスすると「About」ページが表示されます。

実装が完了したら、アプリケーションを起動して、ルーティングが正しく機能していることを確認します。

```zsh
npm start
```

## コード解説
### `<BrowserRouter>` コンポーネント
`<BrowserRouter>`（`Router` としてインポート）は、HTML5のhistory APIを利用してUIとURLの同期を行います。

### `<Link>` コンポーネント
`<Link>` コンポーネントは、アプリケーション内でのナビゲーションリンクを作成し、ページリロードを発生させずにビューを切り替えることができます。

## v6から廃止されたもの
### ~~`exact` プロパティ~~
:::note warn
v6からはexactはデフォルトで全文一致で探してくれるようなので廃止されているようです。
:::

## 参考
- [Tutorial v6.24.1 | React Router](https://reactrouter.com/en/main/start/tutorial)
- [React Router v6でのRouteコンポーネントの扱い方の変更点 #react-router - Qiita](https://qiita.com/seal_qiita/items/63fc7358d90de825ccc8)
- [React Router の"Switch"や"exact" が使用できない時の対処法 #React - Qiita](https://qiita.com/kyo_1111/items/c5810261b8a449f43bfa)
- [React Routerのexactとは何か #react-router - Qiita](https://qiita.com/gombeedoe/items/6f4ea0e37775bac01c0d)