类型“{}”缺少类型“RouteComponentProps<{},,>”中的以下属性

Question

所以我对 React 很陌生，尤其是对 Typescript 很陌生。我正在尽我最大的努力把我的头包裹在这一切上！

1. index.tsx
2. Router.tsx（所有不同的路由）
3. LandingFrame.tsx（页面布局）

import React from 'react';

import LandingMain from './LandingMain'

const LandingFrame = () => {
    return (
        <LandingMain/>
    );
}

export default LandingFrame;

4. LandingMain.tsx（主）

import React, { forwardRef } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';

const YES = gql`
  query yes {
    yes {
      id
      data
      data {
        data
        data
      }
    }
  }
`;

const LandingMain = ({ history }: RouteComponentProps<{}>) => {
  const { loading, error, data } = useQuery(YES);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>landing-page.js</h1>
      {data.yes 
        ? <p>Welcome back, {data.yes.data}</p> 
        : <p>Welcome back, Anon</p>
      }
    </div>

  );
};

export default LandingMain;

（第二点）我希望通过拆分登录页面，框架将首先加载，紧随主要组件中的 graphql 查询。这样，当页面加载时，它不仅会在加载其余页面之前在空白页面上返回 <p>Loading...</p>。

TypeScript error in LandingFrame.tsx(22,14):
Type '{}' is missing the following properties from type 'RouteComponentProps<{}, StaticContext, PoorMansUnknown>': history, location, match  TS2739

此时我只是想尽可能多地拆分代码。但是在这样做的同时，我注意到 TS 不会让我像 React 那样轻松地导入组件。根据我的阅读，我需要以某种方式传递道具？

Answer 1

return (
    <LandingMain/>
);

LandingMain 期望收到 routeComponentProps，但您在渲染它时没有说 props。您需要添加组件所期望的道具。

据我了解，登陆框架也在接收 RouteComponentProps，所以这应该可以工作

const LandingFrame = (props: RouteComponentProps<{}>) => {
    return (
        <LandingMain {...props} />
    );
}