使用react-router-dom v6.4部署生产环境路由异常求助

1. 修正BrowserRouter的basename配置 #

确保basename的值和实际部署路径完全一致，包括结尾的斜杠：

<BrowserRouter basename="/test/myapp/">

React Router对basename的斜杠匹配有严格要求，结尾缺少斜杠可能导致根路径/无法正确映射到/test/myapp/。

2. 检查Nginx的路由重写配置 #

单页应用需要Nginx将所有子路径下的请求转发到index.html，否则刷新页面或直接访问子路由会返回404。确保你的Nginx配置包含以下规则：

location /test/myapp/ {
  root /path/to/your/build/folder;
  try_files $uri $uri/ /test/myapp/index.html;
}

注意替换/path/to/your/build/folder为实际的构建文件目录。

3. 验证组件渲染状态 #

打开浏览器控制台，查看是否有[APP]的日志输出：

• 如果有日志：说明App组件已渲染，问题可能出在Module1组件内部（比如组件报错、未导出或未正确引入）。检查Module1的代码，确认它能正常渲染内容。
• 如果无日志：说明App组件未被正确挂载，检查入口文件（比如index.js）是否正确渲染了App组件，确保没有其他路由或组件包裹导致拦截。

4. 改用React Router v6.4的新路由API（可选） #

如果上述方法无效，可以尝试使用v6.4推出的createBrowserRouter和RouterProvider，这种方式对子路径的支持更明确：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <Container maxWidth="sm">
        <Module1 />
      </Container>
    ),
  },
  {
    path: '/module2',
    element: (
      <Container maxWidth="sm">
        <Module2 />
      </Container>
    ),
  },
], {
  basename: '/test/myapp/'
});

function App() {
  console.log("[APP]");
  return <RouterProvider router={router} />;
}

5. 确认package.json的homepage配置 #

确保homepage的值和部署路径完全一致：

"homepage": "/test/myapp/"

再次确认没有拼写错误或斜杠格式问题。

内容的提问来源于stack exchange，提问作者sam