React Router v4私有路由改写为TypeScript后无法渲染

你的TypeScript版本代码不仅存在语法截断（代码只写到...r就中断了）的问题，还存在类型定义的错误，这才导致私有路由无法正常渲染。我来帮你梳理下正确的实现方式：

先回顾原JS代码的核心逻辑 #

你的JavaScript版本私有路由逻辑是完全没问题的：

• 接收component、authed和剩余的路由相关属性
• 根据authed的布尔状态，决定渲染目标组件还是重定向到首页

TypeScript版本的正确实现 #

1. 先定义正确的Props类型 #

需要让私有路由的Props继承React Router的RouteProps，同时明确authed和component的类型：

• component应该用React.ComponentType<RouteComponentProps<any>>，它能兼容类组件和函数组件，还能正确接收路由传递的match、location等props
• authed是明确的布尔类型
• 剩余属性直接继承RouteProps的所有原生路由属性（比如path、exact）

2. 完整的组件代码 #

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

// 定义私有路由的Props类型，继承RouteProps并扩展authed属性
type PrivateRouteProps = RouteProps & {
  authed: boolean;
  component: React.ComponentType<RouteComponentProps<any>>;
};

const PrivateRoute = ({ component: Component, authed, ...rest }: PrivateRouteProps) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        authed ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: '/',
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
};

export default PrivateRoute;

关键修复点 #

• 修正类型定义错误：把单纯的Component替换为React.ComponentType<RouteComponentProps<any>>，确保组件能正确接收路由上下文的props
• 继承RouteProps：让PrivateRouteProps继承RouteProps，这样所有Route的原生属性都能被正确传递和类型检查
• 补全截断代码：你的原TS代码未写完就中断，这会直接导致语法错误，必须补全完整的解构和组件逻辑

更严谨的泛型版本（可选） #

如果需要给目标组件传递自定义props并获得精确的类型检查，可以用泛型优化：

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

type PrivateRouteProps<T = {}> = RouteProps & {
  authed: boolean;
  component: React.ComponentType<RouteComponentProps<T> & T>;
};

const PrivateRoute = <T extends {}>({ component: Component, authed, ...rest }: PrivateRouteProps<T>) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        authed ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: '/',
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );
};

export default PrivateRoute;

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