React-router-v4默认路由与Express后端配合时嵌套路径失效问题

看起来你遇到的问题根源其实不是React Router的路由匹配逻辑，而是静态资源的加载路径错误，导致React代码根本没机会执行，自然默认的404路由无法渲染。让我一步步帮你排查和解决：

问题诊断 #

当你访问多层嵌套路径（比如example.com/asdf/zzz）时，浏览器会默认从当前路径下去请求静态资源（比如你的app.js）。举个例子，它会请求example.com/asdf/zzz/app.js，但实际你的打包资源是放在根目录的build/文件夹下的，所以这个请求会返回404。而你的Express配置里app.get('/*')会把所有未匹配的请求都返回index.html，这就导致浏览器把index.html当作JavaScript文件解析，进而触发更多错误请求，形成循环，最终页面空白。

解决方案 #

1. 修正Webpack的资源路径配置 #

在你的webpack.config.js的output配置中添加publicPath: '/'，强制所有静态资源从根路径加载，不管当前URL的层级：

output: {
  filename: 'app.js',
  path: path.resolve(__dirname, "build"),
  publicPath: '/' // 新增这一行
},

这个配置会让Webpack在生成的index.html里，把资源引用路径写成绝对路径（比如<script src="/app.js"></script>），而不是相对路径，这样不管你访问哪一层路径，浏览器都会从根目录请求正确的资源。

2. 确认Express静态资源服务的正确性 #

你的Express配置目前是正确的，但可以再确认一下express.static的路径是否指向正确的build文件夹：

app.use('/', express.static(path.join(__dirname, 'build')));
app.get('/*', function (request, response){
  response.sendFile(path.join(__dirname, 'build/index.html'));
});

这个配置会优先匹配静态资源，当请求的是/app.js这类资源时会直接返回文件，只有当请求不是静态资源时，才会返回index.html交给React Router处理。

3. 验证修复效果 #

重新打包你的应用（npm run build），重启Express服务后，访问example.com/asdf/zzz：

• 打开浏览器的开发者工具（F12），切换到网络标签，查看app.js的请求路径是否是根路径（比如http://example.com/app.js）
• 如果资源加载正常，React代码会执行，此时你的默认404路由（FourOhFour组件）应该就能正常渲染了

额外说明 #

你提到移除其他路由只剩默认路由还是无效，这正好验证了我们的诊断——因为React代码都没加载成功，路由逻辑根本没机会运行。只要修复了资源加载路径的问题，路由匹配就会恢复正常。

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