React Router TypeScript 错误与Router答案

【问题标题】：React Router TypeScript errors withRouterReact Router TypeScript 错误与Router
【发布时间】：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 的新手，有什么线索可以说明我缺少什么吗？

【问题讨论】：

标签： reactjs typescript react-router

【解决方案1】：

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

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

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

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

【讨论】：