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

Posted 2023-02-21

【中文标题】React Typescript：添加位置状态以响应路由器组件

【英文标题】：React Typescript: add location state to react router component

【发布时间】：2020-05-02 06:50:34

【问题描述】：

我有一条正常路线

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。

【问题讨论】：

由github.com/DefinitelyTyped/DefinitelyTyped/issues/41674引起

【参考方案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)

它应该可以正常工作。

【讨论】：

这似乎比使用RouteComponentProps 的第三个通用参数来定义状态类型要容易得多。谢谢

【参考方案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);

【参考方案3】：

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

【讨论】：

也许我没有抓住重点，但这如何回答这个问题？

@pzaenger 它确实回答了如何修复编译失败的问题，但正如我之前所说，这是一个临时解决方案。

天哪，你实际上几乎是正确的。在我的 Dockerfile 中，我在复制 package.json 后添加了COPY yarn.lock /usr/src/app/，这解决了问题

我遇到了同样的问题。我不小心将纱线用于我的旧项目，该项目使用 npm 作为包管理器。然后 yarn 创建一个新的锁文件。砰，问题提出来了。谢谢，感谢您帮助解决这个问题。

【参考方案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>;

这对我有用。

【参考方案5】：

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

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案6】：

它就像一个魅力

const  valueX, valueY  = location.state as any;

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案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();

【讨论】：

请为您的答案添加适当的归属。据我所知，这看起来像是您从 YouTube 视频的转录中复制的，而没有注明作者（我从您的答案中编辑了 YouTube 部分）