bunでreact-router-domを使う

💦公式の方法通りだとハマる

業務で、React Router使ったことあるのですがルートの設定を別のモジュールに分けるのを自分でやったことなかったので試してみたくなり使ってみところ公式のインストールのやり方が違った。

https://reactrouter.com/start/library/installation

Viteで環境構築をした後に、以下のコマンドを実行するがモジュールをインポートしてもエラーが出る？

npm i react-router

どうやらreact-router-domが必要らしい。こちらをインストールすると解決した。私は、bunを使っているので、bun add react-router-domとコマンドを実行した。

react-router-dom

モジュールを分ける

同じファイルに書きたくないので本業で作られていたCMSと同じように、routeディレクトリを作成しルートを定義するindex.tsを作成する。

表示するページは、screenディレクトリに作成する。

最初のページ

Home.tsx

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

const Home = () => {
    return (
        <div>
            <div>Home🍎</div>
            <Link to='/about'>About</Link>
        </div>
    )
}

export default Home;

次のページ

About.tsx

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

const About = () => {
    return (
        <div>
            <div>About🍏</div>
            <Link to='/'>Home</Link>
        </div>
    )
}

export default About;

ルートのファイルはこのように書く。

route/index.ts

import { RouteProps } from "react-router-dom";
import Home from "../screen/Home";
import About from "../screen/About";

export const routes = [
  {
    path: '/',
    Component: Home
  },
  {
    path: '/about',
    Component: About
  },
] as const satisfies RouteProps[];

App.tsxにmapを使用して、配列の多次元配列のルートを新しい配列で生成するコードを作成する。この書き方をしないと長くなってしまう💦
ページが１００個もあると大変だ!

App.tsx

import {
  BrowserRouter,
  Route,
  Routes
} from "react-router-dom";
import { routes } from "./routes";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {routes.map(({ path, Component }, i) => (
          <Route key={i} path={path} element={<Component />} />
        ))}
      </Routes>
    </BrowserRouter>
  )
}

export default App;

ページはこんな感じで表示することができる。

最後に

もしページ数が少ないWebサイトなら、Next.jsを使う必要がないと思います。１００ページあると、Next.js欲しいが携わった案件では使われていなかった🤔
使えない事情があったんでしょうね。