React Router DOM v6迁移后路由异常：URL参数正确但组件加载失败

1. 修正导航路径的斜杠问题 #

你当前用的navigate(product_details/${id})是相对路径，React Router v6里相对路径会基于当前路由层级解析，但你的路由配置是绝对路径/product_details/:id，必须改成绝对路径才能正确匹配：

const handleClickRow = useCallback(id => {
  navigate(`/product_details/${id}`); // 补上开头的斜杠
}, [navigate]);

相对路径会导致路由匹配偏差，触发兜底组件加载。

2. 校验UUID正则表达式有效性 #

检查uuid_regular_expression是否符合标准UUID格式，比如正确的正则示例：

const uuid_regular_expression = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;

如果正则写得不对，会导致/:id无法匹配传入的UUID，路由命中失败，转而加载兜底组件。

3. 确保PrivateRoute适配v6规则 #

React Router v6彻底改变了私有路由的写法，旧版实现会导致组件渲染异常，正确的私有路由示例：

import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoute = () => {
  const isAuthenticated = /* 你的鉴权逻辑，比如判断token是否存在 */;
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
};

如果PrivateRoute实现错误，会导致页面刷新后无法正常渲染组件，出现空白。

4. 解决刷新空白的服务端配置问题 #

SPA刷新空白本质是服务器路由配置问题，需要让服务器把所有路由请求都 fallback到index.html，确保React Router在客户端接管路由。比如Nginx配置：

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

Apache或其他服务器也需要做类似的 fallback配置。

5. 确认路由嵌套结构正确性 #

要保证/product_details/:id路由直接挂载在Routes组件下，或者父路由路径配置没有层级冲突，正确的路由结构示例：

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

function App() {
  return (
    <Routes>
      {/* 其他业务路由 */}
      <Route 
        path="/product_details/:id(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i)"
        element={
          <PrivateRoute>
            <ProductsDetailsPage />
          </PrivateRoute>
        }
      />
      {/* 兜底路由 */}
      <Route path="*" element={<NotFoundPage />} />
    </Routes>
  );
}

内容的提问来源于stack exchange，提问作者Melo.js