In a MERN app, if you have a app.get('/') on your server and a <Route path=/' > on your client, which one will trigger first or take priority?

1
votes

Say you have a React client with a nodejs express backend. On the server you have a route set up such that app.get('/') serves a Home.html. On the React side you have react-router-dom set up like 

<Route path='/' component= { NotHome } />

What file will be served/shown to the user, Home or NotHome?

2
node.jsreactjsexpress
your index page. – user7515414

2 Answers

2
votes

There is a difference between server-side routing and the client-side routing.

  1. If you are making a standard HTTP request for the page (e.g. you type the URL in your browser's address bar), the server-side routing will take effect (e.g. serve you Home.html)
  2. But if your Home.html then references the JS containing the <Route /> tag, client-side routing takes effect. react-router-dom will render the NotHome component in that case.
0
votes

The server route will take preference, in a react app using express, your main server file should have a single route like this:

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, '/index.html'));
})

app.listen(8000, '0.0.0.0', (err) => {
  if (err) {
    console.log(err)
  }
  console.log('Listening on 8000')
})

The app.get('/*') is a catch all so that every get request e.g every address in the address bar of your browser will serve the index, which will in turn serve your bundle.js and render components based on your

Hope this helps.

Lloyd