node.js - 使用 Express 设置 React Router

Question

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

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

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

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

路由.js

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

服务器.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);

Answer 1

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

至于何时应该使用 expressRouter 与 app.get 我想说的是尽可能尝试使用 Router，因为这是一种很好的做法。这里有一个相当不错的解释Difference Between app.use() and router.use() in Express

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