React Typescript: add location state to react router component

问题

I have a normal route

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

that uses RouteComponentProps from react-router-dom.

Strangely there were no issues for a long time with this component, but now it is failing to compile on travis-ci when I use history.push(location.state.from.pathname) saying Property 'from' does not exist on type '{}'.

I set this state in my PrivateRoute component that is pretty standard with a Redirect

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

How can I update the typing for location to include a from object with pathname: string;

EDIT:

The solution was to add

COPY yarn.lock /usr/src/app/

to my Dockerfile after I copied the package.json over.

回答1:

Looks like you do not use lock files for the packages. I would suggest you find a working environment (in the previously generated docker image, or from one of the team members), and generate package-lock.json (or yarn.lock) there. I used this command for it npm install --package-lock. It will help you for the first time until the issue will be solved completely.

回答2:

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

来源：https://stackoverflow.com/questions/59752515/react-typescript-add-location-state-to-react-router-component

标签

reactjs

typescript

Docker

react-router