TypeScript React: RouteComponentProps types error or cant access history

Question

I have made a component and used it like...

<TopNav
    loggedIn={global.shared.loggedIn} // false 
    fullName={global.shared.fullName} // ''
    avatar={global.shared.avatarId} // ''
/>

and inside the TopNav components I want to be able to access the props I have passed in and props.history or some other way of navigating the user programatically without a refresh..

import React from 'react';
import { RouteComponentProps } from 'react-router-dom';


interface PropsInterfaceNew {
  avatar: string;
  loggedIn: boolean;
  fullName: string;
}

interface PropsInterface
  extends RouteComponentProps<PropsInterfaceNew> {}
//                                    ^ Error

const TopNav: React.FC<PropsInterface> = (props: PropsInterface) => {
...
 const firstName = props.fullName.split(' ')[0]; // I need props.fullName & others
  const search = (event: React.FormEvent) => {
    event.preventDefault();
    props.history.push('/my/profile'); // I need props.history
  };

The error is

Type 'PropsInterfaceNew' does not satisfy the constraint '{ avatar?: string | undefined; loggedIn?: string | undefined; fullName?: string | undefined; }'.
  Types of property 'loggedIn' are incompatible.
    Type 'boolean' is not assignable to type 'string | undefined'.ts(2344)

alternatively if I remove the history completely like the below I have no errors but no access to history

interface PropsInterface {
  avatar: string;
  loggedIn: boolean;
  fullName: string;
}

const TopNav: React.FC<PropsInterface> = (props: PropsInterface) => {
...

@hardik if I replace export { TopNav }; with...

  export withRouter(TopNav);
//^ err1      ^err2

I get the new error 2

statements are not aligned (align)tslint(1)

and error 1

Declaration or statement expected.ts(1128)

Answer 1

If you want to pass RouteComponentProps, you have to wrap the component with withRouter and then export it.

export withRouter(TopNav);

and props type should be like,

interface PropsInterface extends RouteComponentProps {
  avatar: string;
  loggedIn: boolean;
  fullName: string;
}

const TopNav: React.FC<PropsInterface> = (props: PropsInterface) => {....

This will definitely fix your issue!