About react after packaging: the problem of "resource path not found", the problem of deploying to the secondary directory of the server "open as blank"

1. After packaging and deploying access, an error 404 is reported, and the corresponding main.js or main.css cannot be found.

• Refer to similar questions on stackoverflow :
  

  1. For the first time, the entire folder (usually renamed to the corresponding project name) is deployed to the server directly after npm run buildpackaging react webapp. When buildthe browser www.xxx.com/build/accesses it, the following error is reported:
     

1.1 Reason analysis:

The project packaged by react runs in the server root directory by default. When the packaged project is placed in a subdirectory (such as: myuser.github.io/myproject), it will naturally prompt404

---

Note public/index.htmlthat the say:

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
  Notice the use of %PUBLIC_URL% in the tags above.
  It will be replaced with the URL of the `public` folder during the build.
  Only files inside the `public` folder can be referenced from the HTML.

-->

• The above notes explain: %PUBLIC_URL%when the project is built, it will be automatically replaced with a correct absolute path pointing to public, and only the publicfiles in the folder can be
  correctly referenced in html
• The official also reminds: In js, you process.env.PUBLIC_URLcan

The default packaged file of the create-react-app scaffolding I use will use the domain name as the root directory of the project, such as:
- http://www.xxxx.com The root route is '/'

---

But the reality is that we usually distinguish each project by folder when deploying, such as:

• The server directory where project a is located is: www.xxx.com/projectA The root route is/projectA
• The server directory where project b is located is: www.xxx.com/projectB The root route is/projectB

1.2 Problem solving:

in package.json, sethomepage

"homepage":"."

• The above settings will %PUBLIC_URL%replace the content in index.html with ., so as to be spliced ​​into: ./main.123456.jssuch a resource path relative to index.html

2. The browserHistory mode project used by react is deployed to a subdirectory on the server. When accessing, the page is blank and no error is reported.

• Similar problems on segmentDefault
  

  Reason: When we use BrowserRouter as Router in react-router-dom, we use the method of browser history object to request the server. If the server does not have a relative route to point to the corresponding page route, the resource will not be found.
  Solution: Two solutions: either use HashRouter instead, or let the operation and maintenance perform a new configuration of nginx.conf (same for other proxy servers)

2.1 Use HashRouter to solve

After upgrading from react-router-dom to v4, the official document recommends using BrowserRouter (common URL format com/home/xxx), but this method requires the cooperation of the server, and the redirection can only go to the home page, and cannot stay on the current page.

---

**BrowserRouter**: used in modern browsers, supports H5 history API, but to use it, you need to contact the server deployment, modify the corresponding server configuration **HashRouter**: commonly used in old browsers (better compatibility) , the format is like `come/index.html#/home`

---

import {HashRouter as Router,Route} from 'react-router-dom';

<Router >
    <div>
         <Header />
         <Route path="/" component={Container}></Route>
     </div>
 </Router>

2.2 Still using BrowserRouter, but changing the configuration with the server

Take nginx as an example:
Suppose it is deployed to the www.test.com domain name, the project file directory: /mnt/h5/reactApp , reactApp is the build folder generated by npm run build

server {
    listen 80;
    server_name  test.com;
    root /mnt/h5/reactApp;
    index index.html;
    location ~ ^/favicon\.ico$ {
        root /mnt/h5/reactApp;
    }

    location / {
        try_files $uri $uri/ @fallback;
        index index.html;
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto  $scheme;
    }
    location @fallback {
        rewrite ^.*$ /index.html break;
    }
    access_log  /mnt/logs/nginx/access.log  main;
}

• Remark: react-router has a basename:stringproperty to add a base URL for all locations. Usage scenario: If you need to deploy the page to the secondary directory of the server, you can use the basename to set to this directory.

<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // 将渲染为 <a href="/calendar/today">