react-router-dom 6.0.2版本如何替代v5的路由登录校验重定向写法

核心改动说明 #

react-router-dom v6 对路由API做了大量调整，和你当前使用的v5版本核心差异如下：

• 移除了Route组件的render属性，统一使用element属性传入渲染内容
• 废弃Redirect组件，改用Navigate组件实现重定向逻辑
• 默认开启路由精确匹配，不再需要配置exact属性

替换后代码 #

直接替换你原有的Route代码即可，注意先从react-router-dom引入Navigate组件：

import { Route, Navigate } from 'react-router-dom'

<Route
  path="/"
  element={
    this.props.loading === true 
      ? <Navigate to="/login" replace /> 
      : <Navigate to="/home" replace />
  }
/>

这里的replace参数是为了和原Redirect行为保持一致：替换浏览器历史栈的当前记录，避免用户点击后退按钮回到重定向之前的/路径。如果不需要这个行为可以去掉replace配置。

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