reactjs - React Typescript: lägg till platsstatus till React Router-komponent

Jag har en normal rutt

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

som använder RouteComponentProps från react-router-dom.

Konstigt nog har det inte varit några problem med denna komponent under en lång tid, men nu misslyckas den med att kompilera på travis-ci när jag använder history.push(location.state.from.pathname) och säger Property 'from' does not exist on type '{}'.

Jag satte detta tillstånd i min PrivateRoute-komponent som är ganska standard med en Redirect

<Redirect
  to={{ pathname: '/login', state: { from: props.location } }}
/>

Hur kan jag uppdatera typningen för location för att inkludera ett from-objekt med pathname: string;

REDIGERA :

Lösningen var att lägga till

COPY yarn.lock /usr/src/app/

till min Dockerfile efter att jag kopierade över package.json.

Svar #1

Du kan använda useLocation()-hooken och ange en generell typ, på så sätt kan du åsidosätta unknown-typen som sätts som standard i location.state.

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

interface stateType {
   from: { pathname: string }
}

const { state } = useLocation<stateType>();

console.log(state.from)

Det borde fungera bra.

Svar #2

Tidigare var typkontroll av platsstatus inaktiverad. Det ändrades med https://github.com/DefinitelyTyped/DefinitelyTyped/issues/41674.

Typen har standardvärdet unknown, men du kan ändra det med generiska typer:

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);
}

Relaterade artiklar