Nginx 配置
{
listen 80 ;
listen [::]:80 ;
root /usr/local/react/build; //项目打包代码地址
location / {
try_files $uri $uri/ /index.html; //项目服务访问地址
}
}
BrowserRouter 换成 HashRouter
import React from 'react';
import ReactDOM from 'react-dom/client';
import {HashRouter} from 'react-router-dom'
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<HashRouter>
<App />
</HashRouter>
);
本地运行,URL为真实的URL,BrowserRouter 可以直接访问到真实 URL。 但是项目打包后,当页面刷新或跳转新页面时,客户端浏览器会向服务器请求URL。 服务器会去找build文件夹下的html文件,发现找不到URL指定的路径。 这是因为实际上并没有这样的物理路径,或者没有配置路由请求,所以内容无法显示,而显示404错误。