react-router-dom下如何同时使用Routes、useNavigate与Redirect

• 版本核心变更说明：v6.0.0-alpha.1 属于v6的早期预发布版本，原生支持Routes路由容器、useNavigate导航Hook，但已按照v6的设计方向彻底移除了v5版本的Redirect组件，这不是安装或导入bug，是官方刻意做的API精简调整。

三类核心能力的落地方案 #

• Routes路由容器：该版本原生支持，直接替换v5的Switch组件作为所有路由规则的外层容器即可，所有Route节点需要嵌套在<Routes>内部使用，无需额外安装依赖。
• useNavigate导航Hook：该版本原生提供导出，直接从包中导入后，在函数组件内初始化即可使用：

  import { useNavigate } from 'react-router-dom';
  
  function HomePage() {
    const navigate = useNavigate();
    // 普通跳转：等价于v5的history.push
    const goToProfile = () => navigate('/profile');
    // 替换式跳转：等价于v5的history.replace
    const replaceToLogin = () => navigate('/login', { replace: true });
  }
  

• Redirect重定向能力替代：不需要依赖被移除的Redirect组件，可通过通用封装实现完全一致的重定向效果，分两类场景适配：
  1. 路由表匹配的重定向场景
     针对原来写在路由配置里的<Redirect from="/legacy" to="/home" />逻辑，直接在对应路由的渲染元素中执行跳转逻辑即可，示例代码：

     import { Routes, Route, useNavigate, useEffect } from 'react-router-dom';
     
     // 通用重定向组件，复刻原v5 Redirect的全量行为
     function Redirect({ to }) {
       const navigate = useNavigate();
       useEffect(() => {
         // 替换历史栈，避免用户点返回又跳回重定向源地址，和原Redirect默认replace行为一致
         navigate(to, { replace: true });
       }, [to, navigate]);
       return null;
     }
     
     function AppRouter() {
       return (
         <Routes>
           {/* 原有业务路由 */}
           <Route path="/home" element={<Home />} />
           <Route path="/profile" element={<Profile />} />
           {/* 重定向规则，直接复用上面封装的Redirect组件 */}
           <Route path="/legacy" element={<Redirect to="/home" />} />
         </Routes>
       )
     }
     

  2. 页面内部的条件重定向场景
     针对业务逻辑里判断需要跳转的场景（比如未登录拦截跳登录页），直接在业务组件内结合判断逻辑调用useNavigate执行跳转即可，和原Redirect的触发逻辑没有差异。

避坑提醒 #

• 不要尝试在该alpha版本中直接导入Redirect模块，包导出清单中已彻底移除该模块，强行导入会报导出不存在的运行时错误。
• 不要为了找回Redirect额外引入v5的路由兼容包，会导致路由上下文状态不联动，出现导航状态不更新的问题。

注：如果后续需要更稳定的API支持，可直接替换为正式版react-router-dom v6，其中官方提供的Navigate组件就是Redirect的正式替代实现，但在当前v6.0.0-alpha.1的固定版本下，上述适配方案可实现三类能力的组合使用，不需要调整现有版本依赖。

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