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

IT技术 reactjs typescript docker react-router
2021-03-25 03:06:46

我有一个正常的路线

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

使用RouteComponentPropsfrom react-router-dom.

奇怪的是有很长一段时间,这部分没有问题,但现在却未能收集关于特拉维斯-CI,当我使用history.push(location.state.from.pathname)Property 'from' does not exist on type '{}'.

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

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

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

编辑:

解决方案是添加

COPY yarn.lock /usr/src/app/

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

6个回答

您可以使用useLocation()挂钩提供了一个通用的类型,这样可以覆盖unknown默认型集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)

它应该可以正常工作。

这似乎比使用 of 的第三个泛型参数RouteComponentProps来定义状态类型要容易得多谢谢
2021-05-31 03:06:46

以前,位置状态的类型检查被禁用。这随着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);
}

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

天哪,你实际上几乎是在现场。在我的 Dockerfile 中,我COPY yarn.lock /usr/src/app/在复制 package.json 后添加,并解决了问题
2021-06-01 03:06:46
@pzaenger 它确实回答了如何修复编译失败的问题,但正如我之前所说,它是一个临时解决方案。
2021-06-09 03:06:46
我遇到过同样的问题。我不小心将纱线用于我的旧项目,该项目使用 npm 作为包管理器。然后纱线创建一个新的锁文件。繁荣,问题提出。谢谢你,我很感激你帮助解决这个问题。
2021-06-12 03:06:46
也许我没有抓住重点,但这如何回答问题?
2021-06-19 03:06:46

我从@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>;

这对我有用。

import * as H from "history";
const location: H.Location = useLocation();
正如目前所写,您的答案尚不清楚。编辑以添加其他详细信息,以帮助其他人了解如何解决所提出的问题。您可以在帮助中心找到有关如何编写好的答案的更多信息
2021-05-28 03:06:46