如何在React Router中创建自定义路由处理路由重定向？

步骤1：创建封装路由逻辑的组件 #

React Router v6 推荐通过组件封装路由守卫逻辑，而非自定义 <Route> 组件。我们可以编写一个专用组件来处理 referrer 判断与重定向逻辑：

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

// 封装referrer判断和重定向逻辑的组件
const ActivateAccountRoute = ({ children }) => {
  const navigate = useNavigate();

  useEffect(() => {
    // 检查referrer是否为空，为空则跳转到首页
    if (!document.referrer.length) {
      // 用useNavigate实现重定向，replace: true避免用户回退到当前路由
      navigate(appUrls.home, { replace: true });
      // 若坚持使用自定义redirectTo方法，可替换为：
      // redirectTo(appUrls.home);
    }
  }, [navigate]);

  // referrer不为空时渲染目标组件，否则暂不渲染（重定向会自动触发）
  return document.referrer.length ? children : null;
};

步骤2：在路由配置中使用自定义组件 #

将原路由内的判断逻辑替换为这个自定义组件，让路由配置更简洁清晰：

<Router basename={config.historyBasename}>
  <Routes>
    <Route path={routes.landingPage} element={<LandingPage />} />
    <Route 
      path={routes.activateAccount} 
      element={
        <ActivateAccountRoute>
          <Parent />
        </ActivateAccountRoute>
      } 
    />
  </Routes>
</Router>

补充说明 #

• 使用 useEffect 的原因：直接在组件渲染阶段执行重定向会触发React渲染警告，useEffect 确保逻辑在组件挂载后执行，符合React生命周期规则。
• 复用性：后续其他路由若需要类似的referrer判断逻辑，可直接复用这个 ActivateAccountRoute 组件。
• 路由集成：推荐使用React Router提供的 useNavigate 做跳转，它能更好地与路由系统集成；若你的 redirectTo 方法已处理了路由跳转细节，也可在 useEffect 中替换调用。

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