React Router直访问子路由时main.js找不到的问题解决求助

核心原因 #

直接访问localhost:8080/test/1这类嵌套路由时，浏览器会把相对路径的资源（比如main.js）解析为/test/main.js，而非根目录下的/main.js，最终导致资源找不到的错误。

解决方案 #

方案1：修改index.html资源引用为绝对路径

把index.html里的资源引入从相对路径改成以/开头的绝对路径：

<!-- 原相对路径 -->
<script src="main.js"></script>
<link rel="stylesheet" href="main.css">

<!-- 修改为绝对路径 -->
<script src="/main.js"></script>
<link rel="stylesheet" href="/main.css">

配合你已设置的output.publicPath: '/'，Webpack打包后的资源会输出到根目录，浏览器会直接从根路径请求资源，不受当前路由影响。

方案2：模仿create-react-app的规范目录结构

如果想和create-react-app一样把静态资源归类到static目录，按以下步骤调整：

1. 更新Webpack配置
   在webpack.common.js中调整输出路径和CSS插件配置：

   // webpack.common.js
   module.exports = {
     output: {
       filename: 'static/js/[name].[contenthash].js', // 资源输出到static/js目录
       chunkFilename: 'static/js/[name].[contenthash].chunk.js',
       publicPath: '/',
       clean: true
     },
     plugins: [
       // 若使用MiniCssExtractPlugin提取CSS，调整输出路径
       new MiniCssExtractPlugin({
         filename: 'static/css/[name].[contenthash].css', // CSS输出到static/css目录
         chunkFilename: 'static/css/[name].[contenthash].chunk.css'
       })
     ]
   };
   

2. 修改index.html资源引用
   把引用路径改为对应static目录的绝对路径：

   <script src="/static/js/main.js"></script>
   <link rel="stylesheet" href="/static/css/main.css">
   

关键补充：配置开发服务器的historyApiFallback

无论用哪个方案，都需要在Webpack开发服务器配置中开启historyApiFallback，否则刷新嵌套路由时服务器会返回404：

// 示例：webpack.dev.js中的devServer配置
module.exports = {
  devServer: {
    historyApiFallback: true, // 所有404请求都返回index.html
    open: true,
    port: 8080
  }
};

调整完成后，无论直接访问哪个路由，静态资源都会从根目录（或static子目录）正确加载，同时刷新嵌套路由也不会出现404。

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