React+TS+Webpack5项目构建后React Router DOM路由组件不显示问题

1. 确认嵌套路由的核心要求 #

React Router 6的嵌套路由必须让父组件（即你的<Layout>）渲染<Outlet>，子路由的内容才能挂载到父组件中。哪怕开发模式下因热重载等偶然显示，生产构建后缺少<Outlet>的话子组件肯定无法正常渲染。

修改Layout.tsx，添加<Outlet>：

import { Outlet } from 'react-router-dom';

export const Layout = () => {
  return (
    <div className="layout">
      {/* 这里放置导航、侧边栏等布局元素 */}
      <Outlet /> {/* 子路由组件将渲染在此处 */}
    </div>
  );
};

2. 调整Webpack的publicPath配置 #

你的Webpack配置中output.publicPath设为"/"，若生产环境不是部署在域名根目录，或是直接打开本地文件，绝对路径会导致资源加载异常，间接影响路由组件渲染。修改配置区分开发与生产环境：

// webpack.config.ts
output: {
  filename: "bundle.js",
  path: path.resolve(__dirname, "dist"),
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
},

同时保留package.json中的"homepage": "."配置，确保相对路径生效。

3. 适配部署环境的路由模式 #

开发时devServer开启了historyApiFallback: true，BrowserRouter能正常工作，但生产环境若直接打开本地dist/index.html（使用file://协议），或是服务器未配置SPA fallback（所有请求返回index.html），BrowserRouter的HTML5 history模式会失效，导致路由匹配失败但控制台无报错。

解决方式二选一：

• 替换为HashRouter：将index.tsx中的BrowserRouter改为HashRouter，路由会带#号，本地打开也能正常工作
• 配置服务器：例如Nginx添加try_files $uri $uri/ /index.html;，确保所有路径都指向入口文件

最后验证几个细节 #

• 检查构建后的index.html，确认bundle.js的引用路径为./bundle.js而非/bundle.js
• 确认所有页面组件的导出与导入方式一致（比如命名导出export const Home对应命名导入import { Home }，避免混同默认导出）
• 清除浏览器缓存后重新打开生产页面，避免旧代码干扰

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