“This is the third day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

Hi, I’m Smooth, a sophomore front-end enthusiast who wants to become a front-end development engineer

Configure the pseudo static state to solve the 404 problem that the page is refreshed after deployment

There are only two ways to solve this problem:

  1. Change historyRouter to hashRouter
  2. Configure any path that returns index.html, leaving the React Router to do the rest

However, the second method didn’t work for me for some reason until I used the configuration pseudo-static method, so in this article I would like to share my solution with many friends who have the same problem as me

Popularize basic concepts Q&A

Why 404?

The reason is simple: when you refresh, you first access the server resource based on the URL, then return to the page loaded with the corresponding resource, and render in the browser. If the React Router is 404, it’s because you didn’t return HTML for the route.

Simply put, the resource you need is not matched in the url path on the server

If you do not refresh the server, it will not be 404.

In the browser, you can jump from the home page to other routing addresses because this is rendered by the front end. You define the route in the React Router. The script does not refresh the background page, but JS changes the location dynamically.

Why does hashRouter work and historyRouter not?

React is a single-page application.

SPA is a model for a web application or website, where all user interaction is achieved by dynamically rewriting the current page. As we saw earlier, no matter how many pages we apply, the construct will only produce an index.html. When we type www.xxx.com in the address bar, this opens the index.html file in our nginx configuration directory, and we hop to www.xxx.com/login

The key here is that when we refresh the www.xxx.com/login page, the nginx location is not configured to return resources to the path, so the 404 condition will appear

hashRouter

The router hash mode is known to be represented by the hash symbol #, such as www.xxx.com/#/login, and the hash value is #/login.

The trick is that the hash appears in the URL, but is not included in the HTTP request, so it has no effect on the server, so changing the hash does not reload the page

In hash mode, only the content before the hash symbol will be included in the request. For example, www.xxx.com/#/login and www.xxx.com will be included in the request. Therefore, the server will not return a 404 error even if the location is not configured

The solution

Ok, having said that, now to illustrate the solution the following example is the pagoda panel

Configure pseudo static resources

The first step is to find the configuration entry

Step 2 Perform the pseudo-static configuration

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

location @router{
      rewrite ^.*$ /index.html last;
}
Copy the code

Step 3 Restart the server

Other solutions

You can use the method described above

  1. Change historyRouter to hashRouter
  2. Configure any path that returns index.html, leaving the React Router to do the rest

It’s just that I’ve never configured the second method to work

That’s all for this article

The last

Finally, my name is Smooth, and I will write as many front-end tutorials as I can in 2022. I look forward to your attention

The latest publication plan isWebpackAnd performance optimization knowledge body

At the same time, you can also scan the code to pay attention to my public number: Smooth front-end growth record, public number synchronous update