React生产环境部署后路由失效问题求助

1. 移除无效的exact属性 #

React Router v6 已经彻底移除了Route组件的exact属性，所有路由默认都是精确匹配。多余的exact虽然不会直接抛出错误，但可能干扰路由匹配逻辑，直接删掉即可：

<Route path="/" element={<Project />}></Route>

2. 给懒加载组件套上Suspense #

用React.lazy异步加载组件时，必须用Suspense包裹，否则生产环境下组件加载阶段容易出现空白或不渲染的情况。调整路由代码：

import { Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';

const Project = lazy(() => import("./pages/Project/Project"));

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <Routes>
        <Route path="/" element={<Project />} />
      </Routes>
    </Suspense>
  );
}

3. 修正静态资源路径配置 #

如果项目部署在域名的子路径下（比如https://xxx.com/my-project），必须在package.json里添加homepage字段指定正确路径：

{
  "homepage": "/my-project/"
}

哪怕是部署在根路径，也建议显式设置"homepage": "/"，避免react-scripts自动推断路径出错。

4. 配置服务器重定向规则 #

SPA应用在生产环境中，直接访问路由URL或者刷新页面时，服务器会尝试找对应静态文件，找不到就返回404，导致组件加载失败。必须配置服务器把所有请求重定向到index.html：

• Nginx：在配置文件中添加：

  location / {
    try_files $uri $uri/ /index.html;
  }
  

• Apache：在项目根目录的.htaccess里加：

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  

• Netlify/Vercel：
  • Netlify：创建_redirects文件，内容写/* /index.html 200
  • Vercel：创建vercel.json文件，内容如下：

    {
      "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
    }
    

5. 检查懒加载路径的大小写和正确性 #

Linux服务器区分文件名大小写，本地Windows/macOS不区分，要确保import("./pages/Project/Project")的路径和实际文件的路径、大小写完全一致，避免生产环境找不到组件文件。

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