React Redux SSR项目导航请求出现bundle.js路径报错该如何解决？

问题根因 #

首次请求页面时，服务端返回的SSR渲染HTML中如果使用相对路径引入bundle.js，浏览器会基于当前页面的路由路径发起资源请求，例如访问/list/123时会请求/list/bundle.js。express.static中间件在public目录下找不到对应路径的资源，就会继续向下执行，触发你配置的app.get('*')全匹配SSR路由，将bundle.js当作列表ID参数解析，最终引发报错。

解决方案 #

1. 修正静态资源引用路径 #

修改HTML模板中bundle.js的引入地址为绝对路径，确保不管在哪一级路由下，浏览器都会请求根路径下的静态资源：

<!-- 错误写法 -->
<script src="bundle.js"></script>
<!-- 正确写法 -->
<script src="/bundle.js"></script>

修改后express.static可以直接命中public目录下的bundle.js，不会再走到后续SSR路由逻辑中。

2. 新增静态资源过滤逻辑 #

可以在SSR路由最前面新增请求过滤，直接拦截所有静态资源类请求，避免进入SSR逻辑：

app.get('*', (req, res) => {
  // 新增：拦截静态资源请求直接返回404
  if (req.path.match(/\.(js|css|png|jpg|jpeg|gif|ico|svg)$/)) {
    return res.status(404).send('Not Found')
  }
  const store = createStore(req);
  // 原有逻辑不变
})

3. 优化路由参数提取逻辑 #

不需要手动切割路径获取参数，matchRoutes返回结果中已经包含了解析好的路由参数，直接取用即可，避免路径切割错误：

const promises = matchRoutes(Routes, req.path)
  // 解构获取match参数
  .map(({ route, match }) => {
    console.log("Looking at Route: ", route);
    if (route.loadData) {
      // 直接取用解析后的id参数
      return route.loadData(store, match.params.id)
    }else{
      return null
    }
  })
  // 原有Promise包装逻辑不变
  .map(promise => {
    if (promise) {
      return new Promise((resolve, reject) => {
        promise.then(resolve).catch(resolve);
      });
    }
  });

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