react-router-dom6をレンタルサーバーでも動かしたい

react-router-dom6を実装しています。
ローカル環境ではページ遷移ができているのですがレンタルサーバーに上げると404コンポーネントが表示されてしまいます。
~~/aboutを手打ち入力すると普通の404not foundページになってしまいます。~~
現在ページ遷移を <Link to='/about'>About</Link>などにすることで遷移は実装することができました。ですが初回レンダリング時にpage404コンポーネントが表示されてしまいます

前提

viteでreactを立ち上げています。

package.json
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",

Router.tsx
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>
    </>
  );
}

app.tsx
import Router from './components/Router'

function App() {
  return (
    <div>
      <Router/>
    </div>
  )
}

export default App

ヒントになりそうなこと

プロジェクトをサブディレクトリにデプロイしているのですがurlがおかしそうです。
例えば https://www.google.com/dist にデプロイしたのですが、遷移するとul タグの部分が表示されておりRouteが表示されていません。Linkコンポーネントをクリックすると
https://www.google.com/dist/about/で表示されるのではなくhttps://www.google.com/aboutで表示されます
Linkコンポーネントで移動するとhttps://www.google.com/ で表示されています

行動規範の内容に同意します

回答1件

ベストアンサー

トップ画面はRoutesのindexにあたるため、以下のように変更するといかがでしょうか？

jsx
1      <Routes>
2        {/* <Route path='/' element={<Home />} />*/} //before
3        <Route index element={<Home />} /> //after
4        <Route path='/about' element={<About />} />
5        <Route path='*' element={<Page404 />} />
6      </Routes>