React-router-dom懒加载路由切换异常：生产环境仅刷新生效

以下是针对开发环境正常、构建后路由跳转仅刷新才生效问题的排查和解决步骤：

• 统一路由路径格式
  代码中路由路径存在不一致的情况（如projects未加斜杠，其他路由带斜杠），构建后可能因路径解析逻辑差异导致组件加载失败。将所有路由路径统一改为带根斜杠的格式：

  <Route path="/projects" element={/* ... */} />
  

• 优化React.Suspense的包裹范围
  当前每个路由单独包裹React.Suspense，可能导致路由切换时加载状态触发异常。将Suspense提升至Routes外层，统一包裹所有懒加载组件：

  function App() {
    return (
      <>
        <Header />
        <ScrollToTop />
        <React.Suspense fallback={<Loading />}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/projects" element={<Projects />} />
            <Route path="/aboutus" element={<AboutUs />} />
            <Route path="/contact" element={<Contact />} />
            <Route path="/invest" element={<Invest />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </React.Suspense>
        <Footer />
      </>
    );
  }
  

• 检查打包公共路径配置

  • 若使用Create React App，确保package.json中的homepage字段配置正确。如果部署在域名根路径，可设置为"homepage": "/"；若部署在子路径，需对应设置为子路径（如"homepage": "/your-subpath/"），或设置为"homepage": "./"适配相对路径。
  • 若自定义Webpack配置，需确认output.publicPath与部署路径一致，否则懒加载的chunk文件会请求错误路径，导致组件无法加载。

• 排查ScrollToTop组件逻辑
  确保ScrollToTop组件未干扰路由渲染，正确实现应为监听路由变化触发滚动：

  import { useEffect } from 'react';
  import { useLocation } from 'react-router-dom';
  
  const ScrollToTop = () => {
    const { pathname } = useLocation();
  
    useEffect(() => {
      window.scrollTo(0, 0);
    }, [pathname]);
  
    return null;
  };
  
  export default ScrollToTop;
  

• 校验懒加载导入路径
  确认所有懒加载组件的导入路径大小写、层级与实际文件一致（Linux服务器环境区分路径大小写，开发环境可能不区分），避免因路径不匹配导致chunk加载失败。

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