React项目中Redirect无法导入使用，出现导出错误

错误原因 #

你当前使用的是react-router-dom v6版本，该版本已移除Redirect组件，改用Navigate组件实现路由跳转，直接导入Redirect会触发导出错误。

解决方案 #

1. 替换导入组件：把Redirect换成Navigate
2. 调整跳转逻辑：Navigate默认是push跳转，若要模拟原Redirect的replace行为，需添加replace属性

修改后的私有路由代码：

import { Route, Navigate } from "react-router-dom";
import { useSelector } from "react-redux";

const PrivateRoute = ({ children, ...rest }) => {
  const { auth } = useSelector((state) => ({ ...state }));

  return auth && auth.token ? (
    <Route {...rest} element={children} />
  ) : (
    <Navigate to="/login" replace />
  );
};

export default PrivateRoute;

额外说明 #

react-router-dom v6中Route组件的用法有更新，推荐通过element属性传递路由内容，上述代码已适配该写法，同时保留了原有的身份验证逻辑。

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