React Hash Router双斜杠URL重定向问题：适配useResolvedPath方案求助

问题根源 #

React Router的createHashRouter会自动规范化路径，移除多余斜杠。你配置的path="customerDetails//:id"路由永远不会被匹配——用户访问/#/work/customerDetails//123时，路径会被自动处理为/#/work/customerDetails/123，直接命中正常路由，但原始URL的双斜杠仍会导致useResolvedPath工作异常，所以必须主动拦截旧URL并重定向。

可行解决方案 #

方案一：根组件全局拦截处理 #

修改<Root />组件，挂载时检查原始URL的hash部分，替换双斜杠后重定向：

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

function Root() {
  const navigate = useNavigate();

  useEffect(() => {
    const originalHash = window.location.hash;
    // 把所有连续斜杠替换成单斜杠
    const normalizedHash = originalHash.replace(/\/+/g, '/');
    
    if (normalizedHash !== originalHash) {
      // 用replace模式重定向，避免回退到旧URL
      navigate(normalizedHash.slice(1), { replace: true });
    }
  }, [navigate]);

  return <Outlet />;
}

方案二：捕获路由针对性处理 #

如果只需要处理特定路径，可添加一个全局捕获路由，专门处理双斜杠情况：

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

// 自定义重定向组件
const FixDoubleSlash = () => {
  const location = useLocation();
  const fixedPath = location.pathname.replace(/\/+/g, '/');
  
  if (fixedPath !== location.pathname) {
    return <Navigate to={`${fixedPath}${location.search}${location.hash}`} replace />;
  }
  
  // 无匹配时跳转到默认路径（根据你的需求调整）
  return <Navigate to="/work" />;
};

// 更新路由配置
const router = createHashRouter(
  createRoutesFromElements(
    <Route path="work" element={<Root />}>
      {/* 捕获所有路径，优先处理双斜杠 */}
      <Route path="*" element={<FixDoubleSlash />} />
      <Route path="customerDetails/:id" element={<SiteAccount />}>
        {siteAccountRoutes}
      </Route>
    </Route>
  )
);

注意事项 #

• 不要直接配置带双斜杠的路由路径，React Router会提前规范化，根本匹配不到。
• 用replace模式重定向，避免用户回退时再次进入旧URL。
• 正则/\/+/g会把所有连续斜杠替换成单斜杠，适用于Hash Router场景（无需担心协议部分的//）。

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