Type '{}' is missing the following properties from type 'RouteComponentProps<{},,>'

Viewed 12179

So I'm quite new to React, and especially new to Typescript. I'm trying my best to wrap my head around it all so bare with me!

  1. index.tsx
  2. Router.tsx (all of the different routes)
  3. LandingFrame.tsx (page layout)
import React from 'react';

import LandingMain from './LandingMain'

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

export default LandingFrame;
  1. LandingMain.tsx (main)
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;

(on a 2nd note) I'm hoping that by splitting the landing page, the frame would load first, following the graphql query in the main component. That way when the page loads it doesn't only return <p>Loading...</p> on a blank page before loading the rest.

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

At this point I'm just trying to split up as much code as I can. But while doing so I noticed that TS won't let me import a component as easily as React would. From what I've read, I need to pass props somehow?

1 Answers
return (
    <LandingMain/>
);

LandingMain expects to recieve routeComponentProps, but you are rendering it without said props. You need to add the props expected by the component.

It's my understanding that landing frame is also receiving RouteComponentProps, so this should work

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