React Typescript: add location state to react router component

Question

I have a normal route

function LoginPage(props: RouteComponentProps): React.ReactElement {...
}

that uses RouteComponentProps

Answer 1

Previously, type checking was disabled for location state. That changed with https://github.com/DefinitelyTyped/DefinitelyTyped/issues/41674.

The type defaults to unknown, but you can change it using generics:

import { Location } from 'history';
import { ReactElement } from 'react';
import { StaticContext } from 'react-router';
import { RouteComponentProps } from 'react-router-dom';

type LocationState = {
    from: Location;
};

function LoginPage(
    props: RouteComponentProps<{}, StaticContext, LocationState>,
): ReactElement {
    props.history.push(props.location.state.from.pathname);
}