使用 Express 设置 React 路由器

Posted 2023-02-21

【中文标题】使用 Express 设置 React 路由器

【英文标题】：Setting up React Router with Express

【发布时间】：2016-02-24 04:49:31

【问题描述】：

我有几个关于使用 Express 设置 React 的问题。

首先，我对 Express 和 React-Router 使用了相同的路由路径。我认为这些应该匹配。但是当我导航到一个页面 api/blogPosts 时，它只显示了我从 MongoDB 获取的 JSON 格式的数据。也就是说，Express 路由覆盖了 React 视图。我知道我可以只修改 React-Router 中的路由路径（例如，前面没有'api'），以便有不同的路由。然后它将按预期显示 React 视图，同时仍然进行 api 调用。但同样，我认为路线路径应该匹配。我该如何正确处理？

其次，我使用了 express.Router()，但我不确定这是否必要。什么时候应该使用 express.Router()，什么时候应该只使用 app.get、app.post 等。

第三，当人们讨论客户端路由时，他们是在讨论 React Router 之类的东西吗？当人们讨论服务器端路由时，他们只是指像 apiRouter 调用那样对数据库进行 api 调用吗？

routes.js

<Route component=App>
  <Route path='/' component=Home />
  <Route path='/api/blogPosts/create' component=Create />
  <Route path='/api/blogPosts/:blogPostId' component=BlogPost />
</Route>

server.js

var apiRouter = express.Router();

apiRouter.route('/blogPosts')

  .post(function(req, res) 
    var blogPost = new BlogPost();

    blogPost.postbody = req.body.postbody;
    blogPost.save(function(err) 

      if (err) 
        return res.send(err);
      
      res.json( message: blogPost.postbody + "created")
    );
  )

  .get(function(req, res) 
    BlogPost.find(function(err, posts) 
      if (err) return res.send(err);

      res.json(posts);
    );
  );

apiRouter.route('/blogPosts/:blogPostId')
  .get(function(req, res) 
    BlogPost.findById(req.params.blogPostId, function(err, blogPost) 
      if (err) return res.send(err);

      res.json(blogPost);
    )
  );

app.use('/api', apiRouter);

【参考方案1】：

所以根据我的经验，React Router 是用于单页应用程序的客户端路由。这意味着它使用浏览器的历史 API 来使浏览器看起来像是要转到不同的路线，而实际上却没有离开原始页面。快速路由是服务器端路由，用于与某些 API 或数据库进行交互，就像您提到的那样，或者用于在该 URL 处提供新页面。

至于何时应该使用 expressRouter 与 app.get，我想说尽可能尝试使用路由器，因为这是一种很好的做法。 Difference Between app.use() and router.use() in Express

这里有一个相当不错的解释

最后，如果你想用 React 路由器进行服务器端渲染，请看这里：Client Routing (using react-router) and Server-Side Routing

【讨论】：

好的，这种帮助。但我仍然不知道我应该如何标记事物，因为 apiRouter 覆盖了我在 React Router 中使用的任何东西。

【参考方案2】：

您需要添加一个非 api 路由来为您的 SPA（单页应用程序）提供服务

创建另一个快速路由器，然后添加它

router.use('*',function(req,res,next)
var indexFile = path.resolve(__dirname,'./public/index.html');
res.sendFile(indexFile);

)

或者您可以将 index.html 放在您的公共文件夹中，然后从该索引页面加载您的 SPA。