react-router-domをサブディレクトリでデプロイしたかった

react-router-domをサブディレクトリでデプロイしたかった

手短に...

reactプロジェクトをサブディレクトリにデプロイした時に、例えばhttps://github.com/dist/ にデプロイすると404コンポーネントが帰ってきました
コードはこんな感じ

import { Route, Routes, Link } from "react-router-dom";
import Home from "../page/home";
import About from "../page/about";
import Page404 from "../page/404";

export default function Router() {
  return (
    <>
      <ul>
        <li>
          <Link to='/'>Home</Link>
        </li>
        <li>
          <Link to='/about'>About</Link>
        </li>
      </ul>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='*' element={<Page404 />} />
      </Routes>
    </>
  );
}

解決方法

import { Route, Routes, Link } from "react-router-dom";
import Home from "../page/home";
import About from "../page/about";
import Page404 from "../page/404";

export default function Router() {
  return (
    <>
      <ul>
        <li>
          <Link to='/dist'>Home</Link>
        </li>
        <li>
          <Link to='/dist/about'>About</Link>
        </li>
      </ul>
      <Routes>
        <Route path='/dist' element={<Home />} />
        <Route path='/dist/about' element={<About />} />
        <Route path='*' element={<Page404 />} />
      </Routes>
    </>
  );
}

パスにプロジェクトフォルダ名(今回はdist)を追加することで解決いたしました。
他にこれならbase指定できるなどありましたらコメントで教えていただきたいです....