Setting up React Router with Express

Question

I have a few questions on setting up React with Express.

First, I used the same route paths for both Express and React-Router. I thought these were supposed to match up. But when I navigate to a page, api/blogPosts, it just shows the JSON format of data that I fetched from MongoDB. That is, the Express route overrides the React view. I know that I could just modify the route path in React-Router (for example, without 'api' in front) so that there are different routes. Then it will show the React view as expected, while still making the api calls. But again, I thought that the route paths were supposed to match up. How should I handle this properly?

Second, I used express.Router() and I'm not sure this is necessary. When should I use express.Router() and when should I just use app.get, app.post, etc.

Third, when people discuss client side routing are they discussing things like React Router? When people discuss server-side routing are they just referring to making api calls to the database like the apiRouter calls?

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

So from my experience React Router is for client side routing for a single page application. Meaning it uses the browser's history api to make it appear like the browser is going to different routes without actually leaving the original page. The express routing is server side routing and is used for either interacting with some API or database, like you mentioned, or for serving a new page at that URL.

As far as when you should use expressRouter vs app.get I'd say try to use the Router whenever possible as it is good practice. There's a pretty decent explanation here Difference Between app.use() and router.use() in Express

Now finally, if you want to do server side rendering with react router look here: Client Routing (using react-router) and Server-Side Routing