时间戳

首页 > 解决方案 > 在 useLocation 上设置类型

reactjs - 在 useLocation 上设置类型

问题描述

我正在尝试将打字稿添加到我的项目中，但是我在 IDE 中遇到了 uselocation 错误。知道我在做什么错吗？

import React from "react";
import { useHistory, useLocation, Redirect } from "react-router-dom";
import {ILocation} from '../Interfaces'
import { useSelector } from "react-redux";
import "../App.css";
const Rocket = () => {
  const history = useHistory();
  const location = useLocation<ILocation>();
  const rocketData = location?.data?.rocketDetails;

然后这是我的界面

import { rootReducer } from "./redux/configureStore";

export type RootState = ReturnType<typeof rootReducer>


export interface ILocation {
    data: Object
}

我在 iDE 中遇到的错误是这样的 - 类型“位置”.ts(2339) 上不存在属性“数据”

传递给组件 onCLick 的数据是这样的

<Button
          onClick={() => {
            history.push({
              pathname: `/user/${userData.id}`,
              data: { userDetails: userData },
            });
          }}
        >
          Click here for details
        </Button>

标签： reactjstypescriptreact-routerreact-router-dom

解决方案

根据文档，这不是您声明自定义状态的方式。

相反，将 state 作为第二个参数传递。

history.push(`/user/${userData.id}`, { data: { userDetails: userData } });

该数据现在将出现在state该位置的属性上：

const location = useLocation<{ data: { userDetails: MyUserDetailsType } }>()
location.state.data.userDetails // the data you want.

推荐阅读