Question

关于使用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);

Answer 1

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

至于你何时应该使用expressRouter vs app.get我说尽可能尝试使用路由器，因为这是一个好习惯。这里有一个非常不错的解释Difference Between app.use() and router.use() in Express

现在最后，如果您想使用反应路由器进行服务器端渲染，请查看此处：Client Routing (using react-router) and Server-Side Routing

Answer 2

您需要添加一条非api路线来为您的SPA（单页应用）提供服务

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

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

}）

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

使用Express

2 个答案: