React router 6.22.3 仅在生产模式下不显示，为什么？

Question

这个问题已经被问过，但略有不同，即对我来说，只有在使用构建的项目时才会渲染路由器，否则在 dev 模式下一切都很好。为什么会出现这种情况，我该如何解决？

dev有效的路线：

• http://localhost:5173/
• http://localhost:5173/#/about

生产路线（不起作用）：

• https://my-domain/audio-ui/
• https://my-domain/audio-ui/#/about

我使用

tsc && vite build --base=/audio-ui/

进行构建，因为我需要 /audio-ui 子路径。我有另一个项目，我使用相同的构建方法，它工作正常，但我没有在那里使用react-router-dom。

整个（简单）项目位于 https://github.com/adrhc/audio-ui/tree/RouterProvider_only；查看 main.tsx 内容：

// import React from 'react';
import ReactDOM from 'react-dom/client';
import Dashboard from './Dashboard.tsx';
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
// import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
import { RouterProvider, createHashRouter } from 'react-router-dom';
import Volume from './Volume.tsx';
import About from './About.tsx';
import ErrorPage from './ErrorPage.tsx';
import Root from './Root.tsx';

const router = createHashRouter(
  [
    {
      path: '/',
      element: <Root />,
      errorElement: <ErrorPage />,
      children: [
        {
          path: '',
          element: <Dashboard />,
        },
        {
          path: 'volume',
          element: <Volume />,
        },
        {
          path: 'about',
          element: <About />,
        },
      ],
    },
  ],
  { basename: import.meta.env.BASE_URL }
);

ReactDOM.createRoot(document.getElementById('root')!).render(
  <RouterProvider router={router} />
);

Answer 1

HashRouter

实际上并不需要

basename

属性，因为它们从

"/"

从任何

"..../#/"

URL 提供服务。

换句话说，如果

import.meta.env.BASE_URL

是值

"/audio-ui/"

那么你实际上是在告诉 React-Router 和

HashRouter

使用如下 URL：

• "https://my-domain/audio-ui/#/audio-ui/"

• "https://my-domain/audio-ui/#/audio-ui/about"

换句话说，你是说

"https://my-domain/audio-ui/#/audio-ui/"

是根路由。

如果您从

"https://my-domain/audio-ui"

托管和服务 React 应用程序，则从

basename

中删除

HashRouter

属性，以便它使用

"/"

作为路由/导航/链接的根路径。

const router = createHashRouter(
  [
    {
      path: '/',
      element: <Root />,
      errorElement: <ErrorPage />,
      children: [
        {
          path: '',
          element: <Dashboard />,
        },
        {
          path: 'volume',
          element: <Volume />,
        },
        {
          path: 'about',
          element: <About />,
        },
      ],
    },
  ],
);