React Typescript：添加位置状态以响应路由器组件

Question

我有一条正常路线

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

使用来自react-router-dom 的RouteComponentProps。

奇怪的是，这个组件很长一段时间都没有问题，但是现在当我使用 history.push(location.state.from.pathname) 说 Property 'from' does not exist on type '{}'. 时，它无法在 travis-ci 上编译

我在我的 PrivateRoute 组件中设置了这个状态，这是非常标准的重定向

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

如何更新 location 的输入以包含 from 对象和 pathname: string;

编辑：

解决方案是添加

COPY yarn.lock /usr/src/app/

在我复制 package.json 之后到我的 Dockerfile。

Answer 1

您可以使用提供泛型类型的useLocation() 挂钩，这样您就可以覆盖location.state 中默认设置的unknown 类型。

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

interface stateType {
   from: { pathname: string }
}

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

console.log(state.from)

它应该可以正常工作。

Answer 2

以前，位置状态的类型检查被禁用。 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 3

看起来您没有对包使用锁定文件。我建议你找到一个工作环境（在之前生成的 docker 镜像中，或者来自团队成员之一），并在那里生成 package-lock.json（或 yarn.lock）。我为此使用了这个命令npm install --package-lock。它将第一次帮助您，直到问题完全解决。

Answer 4

我从@Oliver Joseph Ash 的回答中受益，但不知何故我无法访问StaticContext，也许是因为我使用了connected-react-router，它没有导出成员，但我没有深入研究。

我像这样创建了一个模拟类型：

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

type LocationState = {
  // ... type of members passed to state
};

type MockType = {
  [key: string]: string | undefined;
};

type TypeWithLocationState = RouteComponentProps<MockType, MockType, LocationState>;

这对我有用。

Answer 5

import * as H from "history";
const location: H.Location = useLocation();

Answer 6

它就像一个魅力

const { valueX, valueY } = location.state as any;

Answer 7

聚会迟到了，但这是解决我问题的过程。

浏览器或 React 的类型带有一个名为 history 的 Generic，其中包含 location 道具的类型并添加缺少的类型，例如。 “from”让我可以毫无问题地使用位置状态，但请参阅下面的示例。

//types.ts
import { RouteProps } from 'react-router';

//useHistory props
export interface useHistoryProps {
  from: string;
}

然后在我的主文件中

//main.tsx
import { History } from 'history';

const history: History<useHistoryProps> = useHistory();