React Router DOM v6中<Navigate>正确用法及v4迁移跳转失效问题

一、 正确使用方式 #

在 React Router DOM 6 里，<Navigate> 是实现路由跳转的核心组件，使用时注意这几点：

• 必须作为 <Route> 的 element 属性值，或者在组件内部根据条件渲染
• to 属性指定跳转的目标路径
• replace 属性（可选）：设为 true 时会替换当前历史记录，而不是新增，对应 v4 里 <Redirect> 的 push={false} 逻辑

基础示例：

// 访问 /old 时自动跳转到 /new，替换历史记录
<Route path="/old" element={<Navigate to="/new" replace />} />

二、v4 替换为 v6 #

v4 里的 <Redirect> 在 v6 中被 <Navigate> 取代，写法差异很大：

v4 原写法 #

<Redirect from="/dashboard" to="/login" />

v6 替换写法 #

v6 移除了 <Redirect>，且 <Route> 不再支持 from 属性，要把跳转逻辑放到对应路径的 <Route> 的 element 中：

// 等价于 v4 的跳转逻辑，访问 /dashboard 时跳转到 /login
<Route path="/dashboard" element={<Navigate to="/login" replace />} />

三、你的代码无法跳转的问题排查 #

你给出的 v6 代码有语法错误，末尾缺少闭合标签：

// 你的代码（不完整）
<Route path="/dashboard" element={<Navigate to="/dashboard/home" replace />}
// 正确写法
<Route path="/dashboard" element={<Navigate to="/dashboard/home" replace />} />

除此之外，还要检查这些点：

• 所有路由必须嵌套在 <BrowserRouter>（或 HashRouter）容器内
• 确认 /dashboard/home 已经在路由中定义了对应的 <Route> 组件
• 如果是组件内部条件渲染 <Navigate>，要确保触发跳转的状态或逻辑正确

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