如何实现 React Routes 在 gh-pages 和 localhost 上同时正常工作？

Question

404当我去任何路线。

嗯，关于这个thread 我应该把BrowserRouter 改成HashRouter。但是，如果我这样做，我的 localhost 路由将完全停止工作。任何建议如何实现两者？或者只是在开发结束时部署它？或者我错过了什么？

应用程序.tsx

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import './styles/main.scss';
import { Footer } from './components/Footer';
import { Header } from './components/Header';
import { Catalog } from './components/Catalog';
import { Cart } from './components/Cart';
import { Favourites } from './components/Favourites';

const App: React.FC = () => {
  return (
    <>
      <Header />

      <Routes>
        <Route path='phones' element={<Catalog />} />
        <Route path='favourites' element={<Favourites />} />
        <Route path='cart' element={<Cart />} />
      </Routes>

      <Footer />
    </>
  );
};

索引.tsx

import React from 'react';
import { HashRouter } from 'react-router-dom';
import ReactDOM from 'react-dom/client';
import App from './App';
import './styles/utils/reset.scss';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement,
);

root.render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>,
);

Answer 1

在路径中添加/

    <Route path='/phones' element={<Catalog />} />
    <Route path='/favourites' element={<Favourites />} />
    <Route path='/cart' element={<Cart />} />

还为初始路由添加默认路径

   <Route path='/' element={<YOUR_COMPONENT />} />