React Router TypeScript 错误与Router

Posted 2023-02-21

【中文标题】React Router TypeScript 错误与Router

【英文标题】：React Router TypeScript errors withRouter

【发布时间】：2021-10-22 04:11:33

【问题描述】：

我有两个函数，A 和 Tour。

函数 A 调用 Tour 函数。

interface TourProp 
  isOpen : boolean,
  closeTour : () => void,


const A: React.FC<TourProp> = () => 
  const [isTourOpen, SetTourOpen] = useState(false);

  const closeTour = () => 
    SetTourOpen(false);
  ;

  const openTour = () => 
    SetTourOpen(true);
  ;

  return (
    <div>
      ...
      <Tour isOpen=isTourOpen closeTour=closeTour />
    </div>
  );
;

但在 Tour 功能中，如果我这样做，

const Tour : React.FC<TourProp> = withRouter(
  (isOpen, closeTour, location:  pathname , history ) => 
    const steps = [
      
        selector: ".nav",
        content: "This is the Navigation"
      ,
      ...(pathname === "/"
        ? [
            
              selector: ".home",
              content: "This is the Home Content",
              action: () => history.push("/topics")
            
          ]
         : [
            
              selector: ".topic1",
              content: "Rendering with React"
            ,
            
              selector: ".topic2",
              content: "Components"
            ,
            
              selector: ".topic3",
              content: "Props v. State"
            
          ])
       ];
      ....

我收到以下错误，

“RouteComponentProps & children?: ReactNode; 类型上不存在属性“isOpen” '。

“RouteComponentProps & children?: ReactNode; 类型上不存在属性 'closeTour' '。

Type 'ComponentClass, never>, any> & WithRouterStatics>) => Element>' 不能分配给类型 'FC'。

Type 'ComponentClass, never>, any> & WithRouterStatics>) => Element>' 不提供签名匹配 '(props: PropsWithChildren, context?: any): ReactElement |空'。

我是 TypeScript 的新手，有什么线索可以说明我缺少什么吗？

【参考方案1】：

您只需将类型声明添加到 withRoute 函数：

const Tour : React.FC<TourProp> = withRouter<TourProp>(

但请注意，您的类型必须包含正常的 withRoute 属性，例如历史记录、位置和其他属性，否则您最终会缺少这些属性来解决从 react-router 导入 RouteComponentProps 然后按如下方式使用

const Tour : React.FC<TourProp> = withRouter<RouteComponentProps<TourProp>>(