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 :
- For the first time, the entire folder (usually renamed to the corresponding project name) is deployed to the server directly after
npm run build
packaging react webapp. Whenbuild
the browserwww.xxx.com/build/
accesses it, the following error is reported:
- For the first time, the entire folder (usually renamed to the corresponding project name) is deployed to the server directly after
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 prompt
404
Note
public/index.html
that 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 thepublic
files in the folder can be
correctly referenced in html - The official also reminds: In js, you
process.env.PUBLIC_URL
can
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.js
such 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:string
property 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">