React 项目部署后，页面404解决

解决方法一：

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错误。