React Router带查询参数的路径配置问题：403页面未正常渲染

你的问题出在React Router的路由匹配规则上：路由的path属性只匹配URL的路径部分（?之前的内容），查询参数（?后面的部分）不属于路径匹配的范畴，所以你写的path="403?redirected_from=/*"是无效写法，React Router根本识别不了，自然会跳过这个路由，触发最后的404通配路由。

修正步骤 #

1. 修正403路由的path写法 #

把带查询参数的路径改成纯路径"403"，查询参数单独在组件内处理：

export default function MyRoutes() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<NavMenu />}>
          <Route path="403" element={<Error403 />} /> {/* 只保留路径部分 */}
          <Route index element={<Dashboard />} /> {/* 用index代替path="/"，更符合React Router规范 */}
          <Route path="*" element={<Error404 />} />
        </Route>
      </Routes>
    </Router>
  );
}

2. 在Error403组件中获取查询参数 #

在<Error403 />组件里使用useSearchParams钩子获取redirected_from参数：

import { useSearchParams } from 'react-router-dom';

function Error403() {
  const [searchParams] = useSearchParams();
  // 获取redirected_from参数值
  const redirectedFrom = searchParams.get('redirected_from');
  
  return (
    <div>
      <h1>403 无权访问</h1>
      {redirectedFrom && <p>来源页面：{redirectedFrom}</p>}
    </div>
  );
}

3. 优化navigate调用的URL构造 #

调用navigate时，记得用encodeURIComponent编码参数值，避免特殊字符破坏URL结构：

navigate(`/403?redirected_from=${encodeURIComponent(location.pathname)}`);

这样修改后，访问/403?redirected_from=/xxx就会正确渲染<Error403 />组件，不会触发404了。

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