使用react-router-dom时刷新页面不跳转回初始URL是什么原因？如何修复？

• 该现象是react-router-dom客户端路由的默认正常表现：你使用BrowserRouter时，路由跳转完全在前端完成，浏览器刷新时不会主动重置地址栏路径，会保留当前/buyer路径向开发服务器发起请求。
• 本地开发环境默认配置了SPA（单页应用） fallback规则，所有路径请求都会返回应用首页HTML，再由前端路由匹配渲染/buyer对应的页面，因此刷新后路径不会自动回到根路径。

如果你需要实现刷新页面后自动回到根路径http://localhost:3000/，可以选择以下两种方案：

方案1：根组件添加初始化重定向逻辑（全版本通用） #

在应用根组件中加检测逻辑，页面刷新/首次加载时强制跳转到根路径：

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

function App() {
  const navigate = useNavigate();
  useEffect(() => {
    // performance.navigation.type === 1 代表页面是刷新触发的加载
    if (performance.navigation.type === 1) {
      navigate('/', { replace: true });
    }
  }, [navigate]);

  // 此处保留你原有的路由渲染、路由出口等逻辑
  return <>{/* 原有业务代码 */}</>;
}

方案2：路由表添加全局重定向规则（仅适用react-router-dom v6） #

如果你希望所有非根路径刷新时都跳回根路径，可以在路由配置的末尾添加兜底重定向规则：

import { createBrowserRouter, Navigate } from 'react-router-dom';
import Home from './pages/Home';
import Buyer from './pages/Buyer';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/buyer',
    element: <Buyer />,
  },
  // 兜底规则：所有未匹配路径都跳转到根路径
  {
    path: '*',
    element: <Navigate to="/" replace />,
  }
]);

• 生产环境部署时如果使用BrowserRouter，需要额外配置Nginx、Apache等服务端的SPA fallback规则，否则直接访问/buyer路径会返回404。如果不想配置服务端规则，可以将BrowserRouter替换为HashRouter，路径会自动携带#前缀，无需额外服务端配置即可正常使用。

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