CODEWITHSUNDEEP
reactjs
Marco Torrecampo
Marco Torrecampo

Reputation: 233

How to fix 404 when reloading page in reactjs

I'm having trouble with reactjs in production, in my development machine i can easily refresh/reload without redirecting to 404 (not found page) but during production every time i reload or refresh in http://example.com/subdirectory/dashboard it will always go to 404 page of http://example.com but when I'm in development machine http://localhost:3000/subdirectory/dashboard when I refresh/reload the page it will reload as expected.

Note: In production I uploaded my static data into subdirectory so i use basename in my route.

Upvotes: 6

Views: 11585

Answers (5)

Abhishek Tripathi
Abhishek Tripathi

Reputation: 1

In your public folder make a file _redirects and write /* /index.html 200 in it

Upvotes: 0

li x
li x

Reputation: 4051

If your serving your application on a standard webserver you can add a .htaccess using the following which enables rewrite rules:

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

It's likely that the 404 issue you're facing will be solved by simply just serving the above alongside the root of the project.

Alternately you could use the following as well which would serve it as a node server:

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);

The above can be used in conjunction with a .htaccess.

The create react app guys also promote serve which you can find here and the official react deployment documentation here

1: https://github.com/zeit/serve

2: https://create-react-app.dev/docs/deployment#docsNav

Upvotes: 15

Joseph Rex
Joseph Rex

Reputation: 1650

You might have to create a proxy server for your React.js application in production. You can do this in different ways but to do it with Express Node.js, you would have to create a file that looks like this:

const express = require('express');
const path = require('path');

const port = 7700;

const app = express();


app.use(express.static(path.join(__dirname, '../public')));

app.all('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../public/index.html'));
});

app.listen(port, () => {
  console.log(`Listening on ${port}`);
});

The snippet above assumes you have built your React files and your index.html is in a public directory. This proxies all requests from the express server to your React routes with the * wildcard.

With that done, all that's left is to run this express app on your server and it handles your history API routes just like regular server routes.

Upvotes: 1

pawelbylina
pawelbylina

Reputation: 1485

In your http server you have to rewrite all urls to your index.html file. If you are using nginx you can follow this: React-router and nginx

Upvotes: 1

Smit Vora
Smit Vora

Reputation: 470

add basename inside your src/index.js like this (you can also add <base href="/subdirectory" target="_blank"> in your index.html file's head tag)

            <Router
                basename={'/subdirectory'}
            >
                <App />
            </Router>

Upvotes: 0

Related Questions