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.