React18+TypeScript+React Router v6实现受保护路由遇Navigate类型错误

问题根源 #

你的代码存在三个核心问题：

• 类型未导入：ReactNode类型未从react包导入，TypeScript无法识别该类型，引发连锁的类型判断错误（包括你看到的Navigate相关报错）。
• 逻辑反转：受保护路由逻辑写反——正确逻辑是未登录时跳转至首页/登录页，已登录时允许访问子组件，你当前代码是登录状态下反而跳转。
• 变量未定义：isSignedIn变量未声明，需替换为你实际的登录状态判断逻辑（比如从localStorage、Context或状态管理工具读取）。

修正后的代码 #

import { Navigate } from "react-router-dom";
import { ReactNode } from "react"; // 必须导入ReactNode类型

interface Props {
  children?: ReactNode;
}

// 替换为你实际的登录状态判断逻辑，示例从localStorage读取token判断
const isSignedIn = localStorage.getItem("authToken") !== null;

const Protected = ({ children }: Props) => {
  // 修正逻辑：未登录时跳转，已登录则返回子组件
  if (!isSignedIn) {
    return <Navigate to="/" replace />; // 加replace避免回退栈残留问题
  }
  return children;
};

export default Protected;

额外优化建议 #

• 给Navigate添加replace属性，跳转后用户点击返回按钮不会回到受保护路由页面，符合受保护路由的预期行为。
• 若登录状态是动态变化的（比如从Context获取），可通过useContext钩子实现状态响应：

  import { useAuth } from "../contexts/AuthContext"; // 假设你的AuthContext
  
  const Protected = ({ children }: Props) => {
    const { isSignedIn } = useAuth();
    if (!isSignedIn) {
      return <Navigate to="/login" replace />;
    }
    return children;
  };
  

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