ReactJS Router构建版本路由失效问题求助

问题原因 #

本地开发时，react-scripts start启动的开发服务器会自动将所有路由请求重定向到index.html，让React Router处理路由匹配。但执行npm run build生成静态文件后，部署的普通静态服务器会直接根据URL路径查找对应文件，当访问myIp/register时，服务器找不到名为register的文件/目录，就返回了服务器自带的404页面，而非你在App.js中配置的NotFound组件。

解决方案 #

方案1：改用HashRouter（无需修改服务器配置） #

将BrowserRouter替换为HashRouter，路由会以#作为分隔符，服务器只会解析到/路径的index.html，后续的路由由React Router在客户端处理。

修改App.js代码：

// 替换BrowserRouter为HashRouter
import { HashRouter as Router, Route, Routes } from 'react-router-dom';
import './css/Style.css';
import './css/Register.css';
import Home from './pages/Home';
import NotFound from './pages/NotFound';
import Register from './pages/Register';

function App() {
  return (
    <Router>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/register' element={<Register />} />
        <Route path='*' element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default App;

重新执行npm run build部署后，访问路径会变成myIp/#/register，即可正常跳转。

方案2：配置静态服务器，重定向所有请求到index.html #

如果不想使用Hash路由，可以修改服务器配置，让所有请求都指向index.html，交给React Router处理路由。

示例1：使用serve工具快速部署

安装serve：

npm install -g serve

部署build目录时加上-s参数（单页应用模式）：

serve -s build

示例2：Nginx配置

修改Nginx的站点配置，添加try_files指令：

server {
  listen 80;
  server_name your_ip;
  root /path/to/your/build/folder;

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

重启Nginx后生效。

示例3：Apache配置

在项目根目录（或build目录）创建.htaccess文件，添加以下内容：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

方案3：设置package.json的homepage字段（适用于部署在子路径场景） #

如果你的应用部署在服务器的子路径下（比如myIp/my-app/），需要在package.json中添加homepage字段：

{
  "homepage": "/my-app/"
}

你当前是直接部署在根路径，此步骤可忽略，核心还是依赖服务器重定向配置。

内容的提问来源于stack exchange，提问作者capoaira