使用react-router-dom的React项目上线后页面刷新出现404错误如何解决

1 优先排查Apache服务端配置 #

• 确认Apache已开启mod_rewrite模块，可通过phpinfo()或者apache2ctl -M命令查看模块加载状态
• 确认站点的VirtualHost配置中AllowOverride参数设置为All，否则.htaccess文件的规则不会生效

2 修正.htaccess规则 #

替换原有配置为以下更规范的重定向规则，若项目部署在域名子目录（如https://域名/项目名/），需将RewriteBase /修改为RewriteBase /项目名/：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_URI} !^/favicon\.ico$
  RewriteRule . /index.html [L]
</IfModule>

3 修正react-router-dom v6路由配置 #

你当前使用的是v6版本路由，嵌套子路由不要使用绝对路径（开头带/的路径会忽略父级路由前缀，直接匹配根路径），需将所有子路由修改为相对路径：

import React from "react";
import { Navigate } from "react-router-dom";
import MainLayout from "src/layouts/MainLayout";
import DashboardLayout from "src/layouts/DashboardLayout";
import ErrorLayout from "src/layouts/ErrorLayout";
import NotFoundView from "src/views/errors/NotFoundView";
import LoginView from "src/views/auth/LoginView";
import DashboardView from "src/views/app/DashboardView";
import { AddInstallView } from "src/views/app/Install/AddInstallView";
import { NewInstallView } from "src/views/app/Install/NewInstallView";
import { ExistInstallView } from "src/views/app/Install/ExistInstallView";
import { UpdateInstallView } from "src/views/app/Install/UpdateInstallView";
import { SuccessView } from "src/views/app/Install/SuccessView";

const routes = (loggedIn) => {
  const routes = [
    {
      path: "/*",
      exact: true,
      element: <Navigate to="/auth/login" />,
    },
    {
      path: "/app",
      element: loggedIn ? <DashboardLayout /> : <Navigate to="/auth/login" />,
      children: [
        // 子路由去掉开头的/，使用相对路径
        { path: "dashboard", element: <DashboardView /> },
        { path: "install/add", element: <AddInstallView /> },
        { path: "install/add/new", element: <NewInstallView /> }, 
        { path: "install/list", element: <ExistInstallView /> },
        { path: "replacement", element: <UpdateInstallView /> }, 
        { path: "success", element: <SuccessView /> },
        { path: "*", element: <Navigate to="/error/404" /> },
      ],
    },
    {
      path: "/auth",
      element: !loggedIn ? <MainLayout /> : <Navigate to="/app/dashboard" />,
      children: [
        { path: "login", element: <LoginView /> },
        { path: "*", element: <Navigate to="/error/404" /> },
      ],
    },
    {
      path: "/error",
      element: <ErrorLayout />,
      children: [
        { path: "404", element: <NotFoundView /> },
        { path: "*", element: <Navigate to="/error/404" /> },
      ],
    },
  ];
  return routes;
};

export default routes;

4 检查构建配置 #

• 若项目部署在域名子目录，需在package.json中添加配置："homepage": "."，避免构建后的静态资源路径错误
• 确认路由入口使用的是BrowserRouter组件，若不需要兼容路径格式可临时替换为HashRouter（路径带#前缀，无需服务端配置重定向即可解决刷新404问题）

内容的提问来源于stack exchange，提问作者Mohit-Tech