React Router V4 - 404 error on refresh - Nginx issue?

Asked
Active3 hr before
Viewed126 times

9 Answers

routererrorreact
90%

Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , Stack Overflow Public questions & answers ,Join Stack Overflow to learn, share knowledge, and build your career.

In Node, I generally add a catch all route that sends back the index, perhaps there is something similar in PHP:

app.get('*', function(req, res) {
   res.sendfile('./public/index.html');
});
load more v
88%

The location block in your nginx config should be:

location / {
   try_files $uri / index.html;
}
load more v
72%

The most likely issue is that you're not telling Nginx to forward other requests to the /index.html of your application, which makes it so your other pages can't be loaded directly and display a 404 error.,Next, test to make sure that there are no syntax errors in any of your Nginx files:,To fix this, you'll need to make a small change to your Nginx configuration files.

    sudo nano / etc / nginx / sites - available /
       default
load more v
65%

First, let’s establish the problem you’re having. To do that, we’ll need to talk about how the browser and client-side routers work.,Netlify also supports client-side routing, you just need to create a /_redirects file with the following rule,As you can probably guess, that tells Netlify to redirect all requests to .index.html.

app.get('/*', function(req, res) {
   res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
      if (err) {
         res.status(500).send(err)
      }
   })
})
load more v
75%

I had found other guides for dockerising a React project using React Router and served using Nginx. However I kept on coming upon this error when going to an address that was not the root (ie /users or /posts). I could navigate through my React SPA and the address bar would update but when going directly to a route I would get a 404 error.

I had found other guides for dockerising a React project using React Router and served using Nginx. However I kept on coming upon this error when going to an address that was not the root (ie /users or /posts). I could navigate through my React SPA and the address bar would update but when going directly to a route I would get a 404 error.

# Build EnvironmentFROM…
40%

Webpack devserver configuration adds a sentence of historyapifallback: true, try it,2. Browserrouter is as follows: 3. Nested subcomponents are used in the mainpage component: 4. The web pack dev server used by the server, plus — history API fallback Problem: the page will display normally, but refresh/cw/dshperhaps/cw/t1When this sub component routes the page, 404 not found, enter/cwAlthough there is no component display during routing, it is not 404,1. Browserhistory is used:

1. Browserhistory is used:

import createHistory from 'history/createBrowserHistory';
const history = createHistory();
load more v
22%

 Pretag team - issue, fix, solve, resolve
60%

Create your NotFound component, i.e. the page which will display 404 error message: // components/NotFound.js import React from 'react'; const NotFound,To create a client side "404 not found" fallback all you need to do is make use of a <Route /> component with a non-greedy matching path. Create your NotFound component, i.e. the page which will display 404 error message: // components/NotFound.,Handling 404 pages (catch all routes) with React Router v4 A common example of this would be a 404 page

 Pretag team - issue, fix, solve, resolve
48%

To avoid this, you need to load the root file(usually index.html) for all non matching routes so that nginx sends the file and the route is then handled by your react app on the browser. To do this you have to make the below change in your nginx.conf or sites-enabled appropiately,When your react.js app loads, the routes are handled on the frontend by the react-router. Say for example you are at http://a.com. Then on the page you navigate to http://a.com/b. This route change is handled in the browser itself. Now when you refresh or open the url http://a.com/b in the a new tab, the request goes to your nginx where the particular route does not exist and hence you get 404.,See line with command: COPY nginx.conf /etc/nginx/conf.d/default.conf. Here, we are telling Docker to copy the nginx.conf file from the docker host, to the docker container.

To avoid this, you need to load the root file(usually index.html) for all non matching routes so that nginx sends the file and the route is then handled by your react app on the browser. To do this you have to make the below change in your nginx.conf or sites-enabled appropiately

location / {
   try_files $uri / index.html;
}
load more v

Other "router-error" queries related to "React Router V4 - 404 error on refresh - Nginx issue?"