React Typescript: добавить состояние местоположения для реагирования компонента маршрутизатора

Question

У меня есть нормальный маршрут

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

, который использует RouteComponentProps из react-router-dom.

Странно, долго не было проблем с этим компонентом, но теперь это не удается скомпилировать на travis-ci, когда я использую history.push(location.state.from.pathname), говоря Property 'from' does not exist on type '{}'.

Я устанавливаю это состояние в моем компоненте PrivateRoute, который является довольно стандартным с Redirect

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

Как я могу обновите набор для location, чтобы включить from объект с pathname: string;

РЕДАКТИРОВАТЬ:

Решение было добавить

COPY yarn.lock /usr/src/app/

в мой Dockerfile после того, как я скопировал пакет. json over.

Answer 1

Ранее проверка типа была отключена для состояния местоположения. Это изменилось с https://github.com/DefinitelyTyped/DefinitelyTyped/issues/41674.

Тип по умолчанию unknown, но вы можете изменить его, используя обобщенные значения:

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

Answer 2

Похоже, вы не используете файлы блокировки для пакетов. Я бы посоветовал вам найти рабочую среду (в ранее сгенерированном образе docker или от одного из членов команды) и сгенерировать там пакет-блокировку. json (или yarn.lock). Я использовал эту команду для него npm install --package-lock. Это поможет вам в первый раз, пока проблема не будет решена полностью.