React Router Dom v6三级嵌套路由URL手动修改后的重定向实现

针对你遇到的需求——当用户手动修改URL中source动态参数为非法值时自动重定向至合法路径，同时支持多场景下的参数校验，以下是几种可行的React Router v6实现方案：

一、核心思路 #

先维护所有合法的source参数值（比如editor、labelbook），再通过路由钩子或路由守卫，在进入对应路由时校验参数合法性，若参数非法则重定向至当前id对应的默认合法路径（如/parent/:id/editor）。

二、具体实现方案 #

1. 组件内直接校验（轻量场景） #

在SecondChild组件中利用useParams获取参数，useNavigate执行重定向，通过useEffect监听参数变化做校验：

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

// 维护所有合法的source值
const VALID_SOURCES = ['editor', 'labelbook'];

function SecondChild() {
  const { id, source } = useParams();
  const navigate = useNavigate();

  useEffect(() => {
    // 校验source是否合法，非法则重定向
    if (!VALID_SOURCES.includes(source)) {
      // 使用replace: true避免在历史栈中留下非法路径记录
      navigate(`/parent/${id}/editor`, { replace: true });
    }
  }, [id, source, navigate]);

  // 仅当参数合法时渲染组件内容
  if (!VALID_SOURCES.includes(source)) return null;

  return <div>当前有效Source：{source}</div>;
}

2. 复用路由守卫组件（多场景复用） #

如果有多个组件需要用到source参数校验，可以封装一个通用的守卫组件，统一处理校验逻辑：

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

const VALID_SOURCES = ['editor', 'labelbook'];

function SourceGuard({ children }) {
  const { id, source } = useParams();
  const navigate = useNavigate();

  useEffect(() => {
    if (!VALID_SOURCES.includes(source)) {
      navigate(`/parent/${id}/editor`, { replace: true });
    }
  }, [id, source, navigate]);

  // 参数合法才渲染子组件
  return VALID_SOURCES.includes(source) ? children : null;
}

然后在路由中用守卫包裹需要校验的组件：

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="parent/:id">
      <Route index element={<FirstChild />} />
      <Route path=":source" element={
        <SourceGuard>
          <SecondChild />
        </SourceGuard>
      } />
      {/* 其他需要校验source参数的路由也可以复用守卫 */}
      <Route path=":source/detail" element={
        <SourceGuard>
          <SourceDetail />
        </SourceGuard>
      } />
    </Route>
    <Route path="*" element={<NoMatch />} />
  </Route>
</Routes>

3. 数据路由Loader校验（适合带数据请求的场景） #

如果你的项目使用了React Router v6的数据路由（Data Router），可以通过loader函数在路由加载前完成参数校验，直接返回重定向：

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

const VALID_SOURCES = ['editor', 'labelbook'];

// 定义loader函数
function sourceRouteLoader({ params }) {
  const { source } = params;
  if (!VALID_SOURCES.includes(source)) {
    // 非法参数直接重定向
    return redirect(`/parent/${params.id}/editor`);
  }
  // 参数合法，返回空或所需数据
  return null;
}

// 路由配置中绑定loader
<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="parent/:id">
      <Route index element={<FirstChild />} />
      <Route 
        path=":source" 
        element={<SecondChild />} 
        loader={sourceRouteLoader} 
      />
    </Route>
    <Route path="*" element={<NoMatch />} />
  </Route>
</Routes>

补充说明 #

React Router v6中不再支持v5那种通过:source?定义可选参数的方式间接实现校验，而是需要显式处理参数合法性。上述方案可根据项目场景选择：

• 轻量场景选组件内校验
• 多组件复用选守卫组件
• 数据路由场景选Loader校验

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