如何修复在 create-react-app 中找不到的 404

Question

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.

Answer 1

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 / ie 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.

Answer 2

Set basename in BrowserRouter.

<BrowserRouter basename='/xyz'>
  <Route exact path='/' /> 
</BrowserRouter>