如何为React无状态组件添加自定义属性？（TypeScript场景）

这个问题的核心是React Router的默认RouteProps类型里并没有包含auth属性，所以TypeScript会阻止你传递未定义的属性。下面是两种可行的解决方案，分别对应React Router v5和v6版本：

方案一：针对React Router v5 #

首先我们需要自定义PrivateRoute的属性类型，让它继承RouteProps并添加auth字段：

import React from 'react';
import { RouteProps, Route, Redirect } from 'react-router-dom';

// 自定义PrivateRoute的属性类型，扩展RouteProps并加入auth
interface PrivateRouteProps extends RouteProps {
  auth: boolean;
  // 也可以用React.ComponentType<RouteComponentProps<any>>来做更精确的类型约束
  component: React.ComponentType<any>;
}

// 实现无状态的PrivateRoute组件
const PrivateRoute: React.FC<PrivateRouteProps> = ({ auth, component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(routeProps) => 
        // 根据auth状态决定渲染目标组件还是跳转到登录页
        auth ? <Component {...routeProps} /> : <Redirect to="/login" />
      }
    />
  );
};

现在你在Router中使用<PrivateRoute path='/protected' component={Protected} auth={true}/>时，TypeScript就会识别auth是合法属性了。

方案二：针对React Router v6 #

v6版本的Route用法有变化（比如用element替代component），所以类型定义也要对应调整：

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

// 继承RouteProps但剔除默认的element字段，再自定义我们需要的auth和element
interface PrivateRouteProps extends Omit<RouteProps, 'element'> {
  auth: boolean;
  element: React.ReactNode;
}

const PrivateRoute: React.FC<PrivateRouteProps> = ({ auth, element, ...rest }) => {
  return (
    <Route
      {...rest}
      // 根据auth状态渲染目标元素或重定向
      element={auth ? element : <Navigate to="/login" replace />}
    />
  );
};

使用的时候改成：

<PrivateRoute path='/protected' element={<Protected />} auth={true}/>

关键思路说明 #

TypeScript的类型检查严格要求组件接收的属性必须在其定义的类型范围内，所以我们不能直接给继承自RouteProps的组件传递额外属性，必须通过扩展接口的方式把auth加入到合法属性列表中。另外注意在组件内部要把除了auth和目标组件/元素之外的属性透传给原生的Route组件，这样路由的其他功能（比如path、exact等）才能正常工作。

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