react-router-dom v6使用Navigate替代Redirect报非Route组件错误

• react-router-dom v6 明确要求 <Routes> 组件的直接子节点只能是 <Route> 或 <React.Fragment>，你直接将 <Navigate> 作为 <Routes> 的子元素使用，不符合该语法约束，所以触发报错。
• v6 中 <Navigate> 组件本身不支持 from 属性，路径匹配逻辑只能交给 <Route> 组件处理，Navigate 仅负责执行跳转动作。
• 额外补充：你现有代码中 <Route> 的 element 属性传值有误，v6 要求该属性传入 JSX 元素（如 <AuthPage />），直接传入组件引用 AuthPage 无法正常渲染页面。

你可以把跳转逻辑封装到对应 <Route> 的 element 属性中，修改后的核心代码如下：

<Routes>
  {/* 根路径跳转逻辑 */}
  <Route path="/" element={
    this.state.token ? <Navigate to="/competition" replace /> : <Navigate to="/auth" replace />
  } />
  {/* 登录页已登录跳转逻辑 */}
  <Route path="/auth" element={
    this.state.token ? <Navigate to="/competition" replace /> : <AuthPage />
  } />
  {/* 其他业务路由 */}
  <Route path="/competition" element={<CompetitionPage />} />
  <Route path="/submission" element={
    this.state.token ? <SubmissionPage /> : <Navigate to="/auth" replace />
  } />
  <Route path="/conditions" element={<ConditionsPage />} />
  <Route path="/judges" element={<JudgesPage />} />
  <Route path="/winners" element={<WinnersPage />} />
</Routes>

所有路径匹配都交给 Route 的 path 属性处理，匹配到对应路径后，根据 token 状态判断是渲染目标组件还是执行 Navigate 跳转即可，加上 replace 属性可以避免跳转后留下多余的历史记录栈，和旧版本 Redirect 的行为一致。

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