What is the difference between Routing in React and Express

Question

I am having trouble understanding the difference between routing in frontend and backend.

My basic understanding is that the React-router will map a component to a URL like:

   <Router>
      <div>
        <Header />

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/topics" component={Topics} />
      </div>
    </Router>

And the Express-router will map a html-page to a specific route

// GET method route
app.get('/', function (req, res) {
  res.render('index.html')
})

// POST method route
app.post('/', function (req, res) {
  res.redirect('/')
})

I always thought the frontend is responsible for creating the views and the backend would map those views to a route. Meaning visiting a route would render the associated template.

I can't wrap my head around how this changes when using React-route and Express-router.

score 2 · Accepted Answer · answered May 06 '19 at 19:15

Well, indeed there is difference between them. When you are using react-router you use Router and Link components to render the about component which will send you the about page link.

<Link to='/about'>About</Link>
< Route path="/about" component={About} />

it's kinda same in express, if you render a view like this :

app.get('/about', function (req, res) {
  res.render('about.html')
})

Let's see, you want your database data on the front-end. If you use normal view engines like ejs, handlebars then after finding the data from db you will render them to html or ejs page.

If you are using react for single page application then you don't need react-router. But if your app has multiple pages, then using react-router is good.

See this below example code:

app.get('/about', function(req, res) {
// finding the user details from database
  user.find()(function(err, users) {
    if (err) {
        console.log(err);
    } else {
        res.json(users); //sends the user data
    }
});

And now, React have to grab this data from the backend, It can be done by many approaches, I prefer to use axios package which is a npm does the same job as FETCH API does.

 axios.get('http://localhost:5000/about')
      .then(response => {
           this.setState({users: response.data}); //this reponse.data is coming from backend
     })
     .catch(function (error) {
         console.log(error);
 })

So now, you see react-router-dom is not the same as express routing. < Route path="/about" component={About} />, you can give this address anything you like i.e "/details" etc. You only have to give axios.get(endpoint) address as the same as express endpoint. But you must have to use Link from react-router-dom to going to the exact endpoint path of express routing.

<Link to='/about'>About</Link> should be same as app.get('/about',.....)

Hopefully, this will resolve your issues about understanding react-router and express routing.

So is what you're saying -React routing is for mapping a component to a URL and Express routing is to expose REST API endpoints to be accessed using the HTTP protocol (GET,POST,PUT,DELETE). When a route is hit on the frontend it will render the mapped componenet which will call the exposed REST API for the resource it needs (e.g JSON data from the DB) — Darren rogers, May 07 '19 at 23:36

What is the difference between Routing in React and Express

1 Answers1