React Redux bundle.js 被抛出请求

Posted 2023-02-19

【中文标题】React Redux bundle.js 被抛出请求

【英文标题】：React Redux bundle.js being thrown into request

【发布时间】：2021-11-22 17:43:15

【问题描述】：

我的 React Redux s-s-r 应用程序如何处理站点导航有问题我有一个列表页面的路由，它将根据 URL 中的参数显示不同的数据。

Routes.js 文件

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

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

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);
  );
);

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

注意 这张图片取自我的控制台（我在 1 个窗口中结合了客户端和服务器端的输出），下面我将包含我的配置文件的屏幕截图 em>

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

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

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

【参考方案1】：

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

【讨论】：

感谢分享，对我帮助很大，虽然我想出了一个更灵活的解决方案——在我的快速配置中我做了app.use("/static", express.static("public"));，然后在scriptsrc="/static/bundle.js"。我仍然非常好奇这究竟是什么路由原因，为什么反应路由器从公共目录中获取 url？你想清楚了吗？