知らないとヤバイ‼️ Reactのルーティングライブラリ(react-router-dom)について

# はじめに
- 2024年10月15日に執筆

- react-router-dom v6

Reactバージョン（2024/11/13 時点で最新は18.3.1）

フロントエンドはアップデートの頻度が頻繁なためこの記事が正しいのかはご自身で自問自答してください。(この記事に限った話ではないです。)

# react-router-domとは
Reactにおける***ルーティング機能***を提供する***3rd partyのライブラリ***です。これを使用することで、ユーザーがアプリ内で異なるページやコンポーネントへスムーズに遷移するためのロジックを簡単に実装できます。ただReactによって公式に提供されている機能ではなく、外部のライブラリであることに注意してください。

# react-router-domのインストール
```
$ npx create-react-app router-app
$ cd router-app
$ npm install react-router-dom
```
> 引用　https://zenn.dev/yurarin/articles/8369bfe666bff0

# @types/react-router-domのインストール
```
npm install @types/react-router-dom
```

# yarnを使っている場合の注意
yarnの場合はnpmをyarnに変えて実行します。

# 重要なコンポーネント(今後も更新していきます。)

1. ```BrowserRouter```
***URLの変更を管理し***、
アプリケーション全体をラップして、ルーティング機能を提供します。

2. ```Routes```
ルートを定義するためのコンテナです。

3. ```Route```
***各ルートを定義し、pathプロパティにURLパターンを指定し、elementプロパティに表示するコンポーネント***を指定します。

4. ```Link```
***ユーザーがクリックしてページ遷移するためのリンク***を作成します。

5. ```useNavigate```
Reactフックで、***アプリ内でプログラム的にページ遷移を行うためのもの***です。
以前のバージョンで使われていた useHistoryのhistory.pushやhistory.replaceの代わりに使われてるみたいです。

6. ```Outlet```
***ネストされたルートを表示するためのプレースホルダーコンポーネント***で、
親のルートコンポーネント内に配置することで、子のルートコンポーネントがその位置にレンダリングされます。

# 使い方
それぞれの使い方を見ていきます。

### BrowserRouter
アプリケ内のルーティングを管理するためのコンテナで、URLが変わるごとに異なるコンポーネントを表示できるようになります。BrowserRouter の内部に定義された Routes や Route コンポーネントを使って、ネストされたルートを設定できます。
```App.tsx
mport { ChakraProvider } from "@chakra-ui/react";
import theme from "./theme/theme";
import { BrowserRouter } from "react-router-dom";
import { Router } from "./router/Router"

export default function App() {
  return (
    <ChakraProvider theme={theme}>
      <BrowserRouter>
        <Router/>
      </BrowserRouter>
    </ChakraProvider>
  );
}
```


### RoutesとRouterの使い方

```Router.tsx
import { Route, Routes } from "react-router-dom";
import { Login } from "../components/pages/login/Login";
import { Home } from "../components/pages/home/Home"; 
import { homeRoutes } from "./HomeRoutes";

export const Router: VFC = memo(() => {
    return(
        <Routes>
            {/* ルート "/" は Login コンポーネントを表示 */}
             <Route path="/" element={<Login />} />
            {/* ルート "/home" は Home コンポーネントとネストされたルートを表示 */}       
             <Route path="/home" element={<Home />}/>
            {/* ネストされたルート */}
            {homeRoutes.map((route) => (
                <Route
                key={route.path}
                path={route.path}
                element={route.children}
                />
            ))}
            {/* すべての未定義のルートには 404 ページを表示 */}
            <Route path="*" element={<Page404 />} />
        </Routes>
    )
})
```

### useNavigateの使い方
```useNavigateフック```を使うことで、***ユーザーのアクションに応じてルートを変更***できます。
```TopPage.tsx
import { useNavigate } from "react-router-dom";
import { PrimaryBtn } from "../atoms/PrimaryBtn";

export const TopPage = () => {
  const navigate = useNavigate(); // navigate関数を取得

  return (
      <div className="text-center">
        <h1 className="text-7xl logo">テストアプリ</h1>
        <div className="pt-[20vh]">
            <PrimaryBtn onClick={()=> navigate("/login")}>ログイン</PrimaryBtn>//ここで/loginになった時ログイン画面に遷移されるように設定
        </div>
      </div>
  );
}
```

### LinkとOutletの使い方

```Header.tsx
import { Link,Outlet } from "react-router-dom";

export const Header = () => {
  return (
        <header className="bg-gray leading-[70px] fixed top-0  left-0 right-0">
            <div className="container mx-auto flex justify-between">
                <Link to="/">テストApp</Link>
                <nav>
                    <ul className="flex gap-5 text-emerald-800">
                        <li>
                            <Link to="/login">ログイン</Link>
                        </li>
                    </ul>
                </nav>
        </header>
        <main className="pt-[50px] bg-gradient-to-t from bg-emerald-100 bg-emerald-200 h-screen flex flex-col justify-center items-center">
            <Outlet/>
        </main>
    </div>
    );
}
```


# 公式ドキュメント

https://reactrouter.com/en/main


# 資料

https://zenn.dev/yurarin/articles/8369bfe666bff0

https://www.udemy.com/course/react_stepup/?utm_source=aff-campaign&LSNPUBID=Tn3Ix58N9Sg&utm_medium=udemyads&ranMID=47984&ranSiteID=Tn3Ix58N9Sg-rFDfPpQu0dKs0qDQ_3TOtA&couponCode=KEEPLEARNING

ChatGPT