使用react-router-dom动态更新路径后刷新404问题求助

问题原因 #

使用BrowserRouter时，刷新页面会让浏览器直接向服务器请求当前URL对应的资源，但单页应用（SPA）只有一个入口文件（通常是index.html），服务器找不到对应路径的文件，就会返回404。而点击导航是客户端路由跳转，不会触发服务器请求，因此能正常加载页面。

解决方案 #

1. 切换为HashRouter #

将BrowserRouter替换成HashRouter，它通过URL中的哈希（#）管理路由，刷新时浏览器只会请求根路径的index.html，哈希部分由客户端处理，不会触发服务器404。

示例代码：

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

// ...

<HashRouter>
  <Routes>
    <Route path={`${item.path}`} element={<Platform />} />
    <Route path={`${item2.path}`} element={<Licensing />} />
  </Routes>
</HashRouter>

2. 配置服务器重定向 #

若不想使用HashRouter，需配置服务器将所有路由请求重定向到index.html，交由客户端路由接管处理。

Create React App项目

在项目根目录的public文件夹下创建_redirects文件，内容如下：

/* /index.html 200

Netlify、Vercel等平台会自动识别该文件；本地开发用react-scripts start时，默认已处理此问题，无需额外配置。

Nginx配置

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

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

Nginx会先尝试匹配对应文件，找不到则返回index.html。

Apache配置

在项目根目录创建.htaccess文件，内容如下：

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

3. 确保动态路由在API数据加载完成后渲染 #

如果item和item2是通过API获取的，需等待数据返回后再渲染路由组件，避免初始渲染时路由路径为空或错误，导致刷新时匹配不到路由。

示例代码：

import { useState, useEffect } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  const [routeConfig, setRouteConfig] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 模拟API请求获取路由配置
    fetch('/api/getRoutes')
      .then(res => res.json())
      .then(data => {
        setRouteConfig(data);
        setIsLoading(false);
      });
  }, []);

  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <BrowserRouter>
      <Routes>
        {routeConfig.map(item => (
          <Route key={item.path} path={item.path} element={item.element} />
        ))}
      </Routes>
    </BrowserRouter>
  );
}

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