React TypeScript中继承RouteProps报错：接口仅能扩展已知对象类型

错误原因 #

你遇到的错误提示：

接口只能扩展对象类型或具有静态已知成员的对象类型的交集

是因为React Router v6的RouteProps类型结构发生了变化，它不再是可直接被接口继承的普通对象类型，内部包含泛型参数与动态成员，导致TypeScript不允许通过interface extends的方式继承它。

解决方案 #

方案1：改用类型别名替代接口 #

将原有的interface改为type，通过交叉类型（&）组合RouteProps与自定义属性：

import React from "react";
import { Route, Navigate, RouteProps } from "react-router-dom";
import { useAuth } from "./AuthContext";

type PrivateRouteProps = RouteProps & {
  children?: React.ReactNode;
};

const PrivateRoute: React.FC<PrivateRouteProps> = ({ children, ...rest }) => {
  const { token } = useAuth();

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

export default PrivateRoute;

方案2：使用React Router v6推荐的私有路由写法 #

在v6中，官方更推荐将私有路由作为路由布局组件，结合Outlet使用，这种写法无需处理RouteProps的继承问题：

import React from "react";
import { Navigate, Outlet } from "react-router-dom";
import { useAuth } from "./AuthContext";

const PrivateRoute: React.FC = () => {
  const { token } = useAuth();

  // 已登录则渲染子路由内容，否则跳转到登录页
  return token ? <Outlet /> : <Navigate to="/login" replace />;
};

export default PrivateRoute;

使用时在路由配置中嵌套子路由：

// 路由配置文件
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import PrivateRoute from "./PrivateRoute";
import LoginPage from "./LoginPage";
import Dashboard from "./Dashboard";

const router = createBrowserRouter([
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    path: "/",
    element: <PrivateRoute />,
    // 所有需要权限的子路由都放在这里
    children: [
      { index: true, element: <Dashboard /> },
      // 其他私有路由...
    ],
  },
]);

export default function App() {
  return <RouterProvider router={router} />;
}

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