React18 react-router-dom6.3多级路由配置白屏MIME报错解决

路由配置本身无语法错误，白屏和MIME类型报错本质是两个配置问题叠加导致：

• 静态资源引用路径使用了相对路径：访问单级路由/hello时，浏览器默认从站点根路径加载bundle.js，路径匹配所以运行正常；访问二级路由/hello/world时，浏览器会以当前路由路径/hello/为相对基准，请求http://localhost:3000/hello/bundle.js，该路径不存在对应JS资源，开发服务会将index.html内容作为响应返回，触发MIME类型不匹配拦截，页面无法正常渲染。
• 未配置前端路由的服务端回退：修改资源路径后出现Cannot GET /hello/world报错，是因为服务端收到/hello/world请求时，没有将请求转发到根路径的index.html，直接返回了404响应，前端JS根本没有加载执行的机会。

两个问题分别处理即可：

1. 将静态资源公共路径配置为站点绝对根路径
   根据使用的构建工具修改对应配置，保证最终index.html中引用JS、CSS等静态资源的路径是/bundle.js这类从根目录开头的绝对路径，而非bundle.js这类相对路径：
   • 自定义webpack配置场景：

   // webpack.config.js
   module.exports = {
     // 其余配置省略
     output: {
       publicPath: '/',
       // 其余output配置省略
     }
   }
   

   • Create React App脚手架场景：在项目根目录package.json中新增配置项

   {
     "homepage": "/"
     // 其余配置省略
   }
   

   • Vite构建场景：

   // vite.config.js
   export default defineConfig({
     base: '/',
     // 其余配置省略
   })
   

2. 配置开发服务的History路由回退规则
   让服务端收到所有非静态资源的路径请求时，统一返回根目录的index.html，把路由匹配逻辑交给前端React Router处理：
   • 自定义webpack-dev-server场景：

   // webpack.config.js
   module.exports = {
     // 其余配置省略
     devServer: {
       historyApiFallback: true,
       // 其余devServer配置省略
     }
   }
   

   • Create React App、Vite默认内置了该回退逻辑，只要第一步的公共路径配置正确，无需额外修改。

配置修改完成后重启开发服务，直接访问/hello/world路径即可正常渲染对应页面，刷新页面、多级路由跳转都不会再出现白屏、资源加载报错或404问题。

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