React Routing vs Express Routing

Question

Been watching alot of tutorials and i see that there is express routing as well as react routing.

Is the react routing for client and the node js routing for server (api?).

Wanting to know if someone could please clarify this as new to React, Node, Express.

Thanks

Answer 1

It is possible (and even recommended) to use both of them in combination.

TL;DR

• react-router is used to navigate between multiples pages/views of your front-end app/website. Usually in a single page app (SPA), where pages/views are loaded dynamically.
• express router is a way to return static content (index.html, image.png...) AND to handle API calls that are often related to database logic. Those routes are handled server-side.

Example

myapp.com/my-portfolio is a view and should be handled and rendered by react router

// this router render pages components dynamically based on the url
<Route path="/my-portfolio" component={Portfolio} />
<Route path="/page2" component={Page2} />

myapp.com/user/create or myapp.com/api/getMyJson is an api call that should be handled server-side by express router:

// app.js
// api call that return json data
// this is where I will usually return database content
app.get('/api/getMyJson', (req, res) => {
  res.send('{"my_var":"value"}');
});

// api call that return the content of folder app/public where
// the index.html and static resources are usually exposed
app.use(express.static('app/public'))

Single page application workflow

• The front-end (client browser) request the back-end (your server) for the application static content (myLogo.png, index.html...) usually served by express router
• While the first page is loaded and the user begin to interact with the app, the front-end continues to load other pages in the background (lazy loading)
• When the user navigate to another page (with react-router), the page is already loaded and the user is taken there without any further server call nor page reloading
• On another hand, express router need to handle API calls like myapp.com/user/userId/get/notifications to get data that is not "static" like json data.

Answer 2

I'll try explain the difference through an example. Say we have a single page application built with react at www.example.com

React Routing

We hit www.example.com and the index.html is loaded from the server. Note that it has all of your react pages in your bundle.js file. You now click the about button on the navbar, this sends you to www.example.com/about. This call does not hit the server, it is handled by your react router.

Express

Much like above we hit www.example.com and get the index. This time when we hit /about we get information from the server

Take a look at this blog post:https://medium.com/airbnb-engineering/isomorphic-javascript-the-future-of-web-apps-10882b7a2ebc