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

score 1 · Answer 1 · edited May 23 '17 at 12:08

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

Okay, this kind of helps. But I still don't know how I should be labelling things since apiRouter overrides anything that I use with React Router. — anon, Nov 22 '15 at 01:35

score 0 · Answer 2 · answered Nov 02 '16 at 19:31

you need to add one non api route to serve your SPA(single page app)

create another express router and then add this

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

})

or you can just put the index.html in your public folder and load your SPA from that index page.

Setting up React Router with Express

2 Answers2