React app with nginx not switching components when using router

Viewed 50

I am trying to deploy my react app using nginx.

The issue I am running into is that when changing route, e.g. /about it does not actually update front end, it just remains on the index.

Here is my config in sites-available:

server {
  listen 80 default_server;
  server_name server_ip_here;
  root /sites/FrontEnd/React/build;
  index index.html;

  access_log /var/log/nginx/krim.com.access.log;
  error_log /var/log/nginx/krim.com.error.log;

  location / {
      try_files $uri /index.html;
  }
}

And here is the router:

import {Redirect, BrowserRouter as Router,Route,Switch} from 'react-router-dom';

<Router>
      <CookieConsent buttonText="Accept">
      </CookieConsent>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/About" component={Over}/>
        <Route path="/FAQ" component={FAQ}/>
      </Switch>

</Router>

Now, the page index loads, but going to my-ip/About or my/FAQ does nothing when using nginx.

Now using npm start it all works fine, furthermore using serve -s build works fine as well, so this appears to be some nginx misconfiguration thing on my part.

Any help is appreciated, cheers.

EDIT: Correction, local serve does work, but on remote vm it doesn't work either.

2 Answers

Have you tried building it on your own machine instead of the VM (assuming you are using one)?

I built the package on my own pc and then uploaded it to the vm, now it works fine.

Related