when I directly visit 'https://xyz/login', it shows error '404 not found' but it redirect me to 'https://xyz/login' after logout from home page ('https://xyz/').
This problem starts after the deployment of my create-react-app. we used nginx server for deployment.

- 11
- 5
-
1did you try adding "homepage":"." https://stackoverflow.com/questions/43011207/using-homepage-in-package-json-without-messing-up-paths-for-localhost – SoorajSethumadhavan Feb 10 '19 at 06:55
-
Here is simple article to fix this issue. We can solve this issue for any SPA frameworkhttps://blog.almightytricks.com/2020/10/14/how-to-fix-404-page-not-found-error-after-build-in-angular-or-react-or-vue-js/ – Sangram Badi Oct 15 '20 at 11:02
-
https://stackoverflow.com/questions/68544199/how-to-make-create-react-app-return-404-for-resources-that-does-not-exist-on-it/68544318#68544318 – KushalSeth Jul 27 '21 at 12:04
2 Answers
Edit nginx/sites-available/default in VIM OR nano which ever you prefer, on your server machine.
vi /etc/nginx/sites-available/default
nano /etc/nginx/sites-available/default
Change below
location / {
try_files $uri $uri/ =404;
}
to
location / {
try_files $uri $uri/ /index.html;
}
but it redirect me to 'https://xyz/login' after logout from home page ('https://xyz/').
You are able to access login from the logout button because 'create-react-app' and BrowserRouter are only active and able to do routing from / i.e. homepage. If you go to /someLink your server does not know what to do with it, then it read a rule to go to 404 error. The above changes all requests to always going to your homepage, that way BrowserRouter can take it from there.
If you want to read more about the issue, check out this question: Discussion
side note: SEO wise, google still crawls SPAs, but checkout https://www.npmjs.com/package/react-snapshot for SPA optimization.

- 312
- 3
- 4
Set basename in BrowserRouter.
<BrowserRouter basename='/xyz'>
<Route exact path='/' />
</BrowserRouter>

- 2,223
- 2
- 17
- 22