属性 'push' 类型不存在 'NavigateFunction' Typescript

Question

由于新版本 6 不允许使用历史记录；我使用“useNavigate”而不是 useHistory。在接受用户输入后，这些输入数据应该进入下一页。使用“History.push”命令传递数据时显示此错误：

属性 'push' 在类型 'NavigateFunction'

上不存在

代码如下：

import { useNavigate } from "react-router-dom";

export interface UserData {
  name: string;
  gender: string;
  lang: string;
}

const history = useNavigate();

const [UserData, setUserData] = useState<UserData>({
    name: "",
    gender: "Male",
    lang: "React",
  });

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;

    setUserData({ ...UserData, [name]: value });
  };

  const handleSubmit = () => {
    history.push("/exam", UserData);
  };

我应该更改和添加什么？

Answer 1

useNavigate 钩子 returns 一个函数，而不是带有 [=14= 的历史对象]方法。

useNavigate

declare function useNavigate(): NavigateFunction;

interface NavigateFunction {
  (
    to: To,
    options?: { replace?: boolean; state?: any }
  ): void;
  (delta: number): void;
}

将 history 重命名为 navigate，这样以后就不会混淆了。

const navigate = useNavigate();

调用navigate函数并在state属性.

下的第二个参数，可选的options参数中传递状态

const handleSubmit = () => {
  navigate("/exam", { state: UserData });
};

属性 'push' 类型不存在 'NavigateFunction' Typescript

Property 'push' does not exist on type 'NavigateFunction' Typescript

reactjs

react-router

react-router-dom

react-typescript