react-router-dom 不适用于子目录中的 React 应用程序的嵌套页面和子页面

Question

我正在使用 vite 开发 React 应用程序，并且使用最新版本的 React-router-dom v 6.23.0。 我的 React 应用程序构建在主目录的子目录 (./new-mobile/dist) 上。

这是我的 main.tsx 文件

import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import store from '../redux/store.js'
import { Provider } from 'react-redux'
import {RouterProvider, createBrowserRouter} from 'react-router-dom';
import App3 from './App3'
import TestFile from './TestFile'

const basename = '/new-mobile/dist';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: 'testfile',
        element: <TestFile />
      }
    ]
  },
  {
    path: 'app3',
    element: <App3 />
  }
],
{
  basename: basename
});

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <Provider store={store}>
    <RouterProvider router={router} />
  </Provider>
);

这是 vite.config.ts 文件

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import Checker from 'vite-plugin-checker';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    Checker({ typescript: true }),
  ],
  base: './new-mobile/dist'
})

主要问题是当我进入主页时https://my-domain/new-mobile/dist 它工作正常，但是当我进入其嵌套页面（https://my-domain/new-mobile/dist/testfile）或子/子页面（https://my-domain/new -mobile/dist/app3）它爆发了。

此外，该路由器在我的本地设置中运行良好，但在测试环境中出现故障。

我尝试过的事情： 我尝试添加基本名称，但也不起作用。 我尝试了 jsx 版本的路由器，但仍然无法工作。

Answer 1

尝试像这样更新您的代码：

import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import store from '../redux/store.js'
import { Provider } from 'react-redux'
import { BrowserRouter, Router, Routes, Route } from 'react-router-dom';
import App3 from './App3'
import TestFile from './TestFile'

const basename = '/new-mobile/dist';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <Provider store={store}>
    <BrowserRouter basename={basename}>
      <Routes>
        <Route path="/" element={<App />}>
          <Route path="testfile" element={<TestFile />} />
        </Route>
        <Route path="app3" element={<App3 />} />
      </Routes>
    </BrowserRouter>
  </Provider>
);