What is the difference using react-router and the express routes.js

Question

I am doing a project using react, redux and express, I don't understand what is the difference between react-router and the express routes.js, did I need to combine the two or just use one ?

https://github.com/reactjs/react-router

Thanks for the help :)

Answer 1

Note: this stackoverflow post contains examples and codes that could help you a lot.

It's a classical misunderstanding. Express will handle your backend routes whereas React (with react-router or any front-end routing lib) will handle frontend routes. Your React application will probably be an SPA (single page application), meaning that your server (express or something else) will have to serve the index.html and react will handle your application from here. Which mean that React will evaluate the routes and decide which view to render.

Therefore, you have to ensure that when a users goes on a route like /accounts/me, the servers serves your frontend (react) application if needed, but something like /api/users/me would render data. It's just an example.

A "normal" usage would be to handle your data (via an API) with express and the application (pages and views) only with React.

If you are using server-rendering, it becomes a bit more complicated.

In most cases, yes, you will have to use both.

Edit: it would be easier to answer if your question was more specific about your usage and what you want to do.

Edit 2: Most of the time, it's not the same servers serving the frontend application and the API (data), if it is, just ensure that the application is send when some routes hit the serve: i.e /home, /about (which are obviously -here- not api routes) should be send serve index.html as your frontend application, and React will take care of the routes to decide what to render.