React Router routes not working on nginx create-react-app

Question

I'm using "react-router-dom": "^4.2.2".

If I test on localhost:3000/second it works perfectly.

When I upload this on ubuntu server with nginx and I try www.website.com, it works . When I try to use www.website.com/second it gives me 404 not found. I'm using create-react-app.

app.js

class TestRoutes extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(<React.Fragment>
            <BrowserRouter>
                <Switch>
                    <Route exact path='/' component={MainPage}/>
                    <Route path='/second' component={SecondPage}/>
                    <Route path='/third' component={ThirdPage}/>
                </Switch>
            </BrowserRouter>
                </React.Fragment>);
    }
}

ReactDOM.render(<TestRoutes/>, document.getElementById("root"));

/etc/nginx/sites-available/default Here's the configuration file from the server

server {
        listen 443 ssl;

    root /var/www/reactcamera/build;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;
    server_name website.com www.website.com;
    ssl_certificate /etc/letsencrypt/live/website.com/fullchain.pem; # 
    managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/website.com/privkey.pem; # 
    managed by Certbot


    location / {
            # First attempt to serve request as file, then
            # as directory, then fall back to displaying a 404.
            try_files $uri $uri/ =404;
    }

There are so many things that could be going wrong here. Do you have a redirect to the dist directory that create-react-app makes on yarn build? Did you build? Etc... — Sten Muchow, Mar 13 '18 at 08:27
Yes, I cloned it from git and did `npm install` and `npm run build`. — sander, Mar 13 '18 at 08:28
nginx.conf? So you have it pointing to something when you go to the URL? — Sten Muchow, Mar 13 '18 at 08:29
Did you restart nginx ? Did you make a link to the `/etc/nginx/sites-enabled` ? — Striped, Mar 13 '18 at 08:53
I restarted the nginx service by `sudo service nginx restart`. The defult path to `www.website.com` works, but when I type `www.website.com/second` it gives me 404. Do I need to somehow tell the server about each path? — sander, Mar 13 '18 at 08:56
It seems like React Router shouldn't cause a round trip to the server at all... can this be stymied locally? — Scotty H, Oct 01 '18 at 20:17

score 21 · Accepted Answer · answered Mar 13 '18 at 09:32

21

The answer is found in this thread React-router and nginx

What I had to do was modify default configuration file in /etc/nginx/sites-available/default to:

    location / {
            # First attempt to serve request as file, then
            # as directory, then fall back to displaying a 404.
            try_files $uri /index.html;
    }

answered Mar 13 '18 at 09:32

sander

1,426
4
19
46

this really nice solution, i have one issue in this post could you check it once it's related to the nginx server integration https://stackoverflow.com/questions/74374786/why-nested-routesreact-router-are-not-working-with-nginix-container-docker-bui – jsBug Nov 09 '22 at 12:28

score 2 · Answer 2 · answered May 12 '20 at 14:01

If you wish to do this in a Dockerfile and run your React app, using nginx please see the below answer.

https://stackoverflow.com/a/61753597/4388776

This fixes the React Router issues where you allow nginx to route traffic coming on different endpoints, directly to you React Application.

score 0 · Answer 3 · answered Sep 27 '19 at 03:53

0

The solution that works for me in the live server:

server {
        listen 80;
        listen [::]:80;

        root /var/www/example.com;
        index index.html index.htm index.nginx-debian.html;

        server_name example.com www.example.com;

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

answered Sep 27 '19 at 03:53

Fatema Tuz Zuhora

3,088
1
21
33

please could you check this post its related to nginx configuration i have been facing the same issue with react router https://stackoverflow.com/questions/74374786/why-nested-routesreact-router-are-not-working-with-nginix-container-docker-bui – jsBug Nov 09 '22 at 12:29

score -2 · Answer 4 · answered Mar 13 '18 at 08:51

-2

You need to configure nginx by going /etc/nginx/sites-available/.

There will be a template default file so if you would like to keep it, copy it. After you do that, use any text editor and change /etc/nginx/sites-available/default to following:

server {
   listen 80 default_server;
   root /var/www/[Your repo name]/build;
   server_name [your.domain.com] [your other domain if you want to];
   index index.html index.html;
   location / {
   }
}

answered Mar 13 '18 at 08:51

Krina Soni

870
6
14

Thank you for the comment. I have added the `/etc/nginx/sites-available/` to the original post, is there something wrong with my configuration? Do I need to somehow tell the server about each of the paths suchs as `www.website.com/second`? – sander Mar 13 '18 at 09:02

React Router routes not working on nginx create-react-app

4 Answers4