CODEWITHSUNDEEP
reactjsnginxreact-routernginx-reverse-proxy
Rich
Rich

Reputation: 73

React Router refresh 404 with Nginx

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!

Upvotes: 2

Views: 5010

Answers (2)

Mr Coder
Mr Coder

Reputation: 523

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> ```

Upvotes: 0

Ron
Ron

Reputation: 181

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.

Upvotes: 1

Related Questions