TypeScript提示'this'隐式为any类型 React路由跳转报错如何解决

你当前使用的是React函数组件，函数组件中不存在this对象，this.props是类组件的专属写法，此处属于语法使用错误。即使关闭TS隐式this校验，运行时也会因为this为undefined导致调用props失败，完全无法实现功能，不属于类型校验的问题。

根据你使用的React Router版本选择对应方案即可：

方案1：React Router v5 版本 #

使用useHistory路由Hook获取history实例：

1. 导入路由Hook

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

2. 组件内调用Hook获取实例
   在Login组件顶层添加代码：

const history = useHistory();

3. 替换报错行
   把this.props.history.push("/home");替换为：

history.push("/home");

方案2：React Router v6 版本 #

v6版本移除了useHistory，改用useNavigate实现跳转：

1. 导入路由Hook

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

2. 组件内调用Hook获取实例
   在Login组件顶层添加代码：

const navigate = useNavigate();

3. 替换报错行
   把this.props.history.push("/home");替换为：

navigate("/home");

确保Login组件处于Router组件的上下文作用域内，否则路由Hook会调用失败。如果组件没有被Route直接包裹，可通过withRouter高阶组件（v5）或在父级路由中渲染组件保证上下文可用。

内容的提问来源于stack exchange，提问作者user5405648