React Redux bundle.js 被抛入请求

Question

我对我的 React Redux SSR 应用程序处理站点导航的方式有疑问我有一个列表页面的路由，它将根据 URL.

中的参数显示不同的数据

Routes.js 文件

export default [
  {
    ...App,
    routes: [
      {
        ...HomePage,
        path: '/',
        exact: true
      },
      {
        ...ListPage,
        path: '/list/:id',
        exact: true
      },

在我的 Index.JS 文件中，我的 express 后端是运行ning 我遍历我的路由目录以查看与请求路径匹配的路径...

const app = express();
app.use(express.static('public'));
app.get('*', (req, res) => {
  const store = createStore(req);

  const promises = matchRoutes(Routes, req.path)
    .map(({ route }) => {
      console.log("Looking at Route: ", route);
      if (route.loadData) {
        const params = req.path.split('/');
        console.log('my params are: ', params)
        return route.loadData(store, params[2])

      }else{
        return null
      }
    })
    .map(promise => {
      if (promise) {
        return new Promise((resolve, reject) => {
          promise.then(resolve).catch(resolve);
        });
      }
    });

  Promise.all(promises).then(() => {
    const context = {params: req.params};
    const content = renderer(req, store, context);

    if (context.url) {
      return res.redirect(301, context.url);
    }
    if (context.notFound) {
      res.status(404);
    }

    res.send(content);
  });
});

我的理解是应该只有 2 件事要迭代，App 组件 Route 和 ListPage 组件 Route 然后调用它们各自的 loadData() 函数，网站继续运行。然而，在它通过前 2 条路线并使用相关信息填充我的页面后，Index.js 文件再次被调用并遍历路线，但这次没有用户尝试的 URL访问它用“bundle.js”替换它，我不明白这里发生了什么。这是我得到的输出我希望只有输出的上半部分。

注意 这张图片取自我的控制台（我在 1 window 中合并了客户端和服务器端输出） '将包含我的配置文件的屏幕截图

当然，我的代码并不期望这是一条路径，应用程序中断了，因为它试图在 ID 为“bundle.js”而不是标准编号的列表中获取信息。

问题有人可以向我解释一下我的代码在这里做错了什么，或者如果这就是我应该如何解决这个问题的方式，我将不胜感激。

我目前正在尝试创建我的第一个 SSR 应用程序，所以我是这项技术的新手，所以我可能遗漏了一些明显的东西。

Answer 1

经过进一步调查，我注意到我在控制台中看到的文件 bundle.js 指的是位于 /list/bundle.js 位置的文件，但我的包实际上在我的 public 目录中所以我不得不修改脚本 Src，以便在我完成此应用程序的预期功能后它会引用 http://localhost:3000/bundle.js。

React Redux bundle.js 被抛入请求

React Redux bundle.js being thrown into request

javascript

reactjs

react-router

redux