React Router refresh 404 with Nginx

Question

Before I start off I would like to say I did find this question and similar ones but the solution did not work.

THE ISSUE: Refreshing a react page, or attempting to go straight to the url (ex: www.sitecensored.com/portfolio) gives me a 404 error.

I have setup Nginx as a reverse proxy from port 80 to 3000 (React). React is being served using pm2 serve.

location /api is being handled by node/express

location / is being handled by React

When I add try_files i get a 501 from Nginx. I am guessing there is a step missing but I am not familiar enough with Nginx to know what that step is.

React does not rely on Node or Express, only Nginx. At this time they are only being used to handle server side processing of a contact form.

NGINX

server {

    listen [::]:80 ipv6only=off;

    server_name www.sitecensored.com sitecensored.com;

    location /api {
            proxy_pass http://127.0.0.1:3001;
    }

    location / {
            root /srv/www.sitecensored.com/client/build;
            proxy_pass http://localhost:3000;
            proxy_http_version 1.1;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Host $host;
            proxy_set_header X-NginX-Proxy true;
            proxy_redirect off;
            proxy_set_header Connection "upgrade";
            proxy_set_header X-Client-Verify SUCCESS;
            proxy_redirect off;
            proxy_set_header X-Forwarded-Proto $scheme;
    }
 }

REACT

<Router key="router">
    <div>
      {/* top navigation bar including Page title */}
      <Navbar key="navbar" />
      <Switch key="switch">

        <Route key="homeroute" exact path="/" component={Home} />

        <Route key="websiteroute" exact path="/about/website" component={Website} />

        <Route key="portfolioroute" exact path="/portfolio" component={Portfolio} />

        <Route key="faqroute" exact path="/faq" component={FAQ} />

        <Route key="resumeroute" exact path="/resume" component={Resume} />

        <Route key="contactroute" exact path="/contact" component={Contact} />
      </Switch>
    </div>
  </Router>

Of course, if I am doing something wrong, stupid, or need more information please let me know.

Thanks!

Out of interest, can you navigate to your site by entering the ip address then your port number. I.e. `216.58.208.174:3000`? If you can, then it will be an issue with your domain name, if you can't then it narrows it down to the port forwarding issue. — Stretch0, Apr 10 '18 at 15:42

Ron · Answer 1 · 2018-04-10T18:29:26.937

1

I wish I could ask this in a comment but I don't have the rep to do so. When you say refreshing are you refreshing at a location like: www.sitecensored.com/about/website or at www.sitecensored.com/? Also, Could you try as a test putting an additional nginx block in that is like:

location /portfolio {
        proxy_pass http://localhost:3000;
        proxy_redirect     off;
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Host $server_name;
}

And tell me if it loads your react app? Doing so will help confirm some suspicions I have on the issue.

edited Apr 10 '18 at 18:29

answered Apr 10 '18 at 15:51

Ron

181
3
12

home page refreshes with no problem, it is locations like www.sitecensored.com/about/website that turn into a 404. I added the extra location and same thing, 404s – Rich Apr 10 '18 at 16:04
1

Thanks for the bump to whoever up-voted this, I can now comment! – Ron Apr 10 '18 at 16:04
Did you try adding that block and going to the URL? If so what happened? – Ron Apr 10 '18 at 16:09
I added the extra location and same thing, 404s – Rich Apr 10 '18 at 16:10
I changed the block as it had some duplicate items and root in it which I didn't want. Could you give that one more try? – Ron Apr 10 '18 at 16:21
same thing, unfortunately – Rich Apr 10 '18 at 16:25
Can you post the nginx access and error logs to a gist for me to take a look at? – Ron Apr 10 '18 at 16:27
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/168663/discussion-between-richwb-and-ron). – Rich Apr 10 '18 at 16:33

score 0 · Answer 2 · answered May 14 '20 at 05:42

you have to mention the home path in package.josn before you create to build you to set in package.json home URL: domain.com

Error: there no error on Nginx config you have you use react history or hash router that keeps URL in react side

<HashRouter history={history}> 
   <Route path='/' component={IndexPage} exact={true} /> 
</HashRouter> ```

React Router refresh 404 with Nginx

2 Answers2