React中history属性不存在TS报错问题求助（MERN栈开发）

这个报错的核心原因很明确：你的Login组件的props类型userprops没有包含React Router提供的history属性，TypeScript自然会认为这个属性不存在。咱们一步步来修复它：

1. 为Props添加路由相关类型定义 #

React Router提供了RouteComponentProps类型，它包含了history、location、match这些路由专属的props。你需要导入这个类型并让你的userprops继承它：

import React, { Component } from 'react'
import { login } from './userfunctions'
// 导入路由组件的props类型
import { RouteComponentProps } from 'react-router-dom';

// 让你的props接口继承RouteComponentProps
interface userprops extends RouteComponentProps {}

interface data {
 email:string;
 password:string;
 errors: string;
}

// ... 你的组件代码不变

这样TypeScript就会识别this.props.history是合法的props了。

2. 确保组件被React Router正确包裹 #

光有类型还不够，你需要确保Login组件是通过React Router的<Route>组件渲染的，这样history才会被实际注入到组件的props中。比如在你的路由配置里：

import { Route } from 'react-router-dom';
import Login from './Login';

// 路由配置示例
function App() {
  return (
    <div>
      <Route path="/login" component={Login} />
      {/* 其他路由... */}
    </div>
  );
}

备选方案：使用withRouter高阶组件 #

如果你的Login组件不是直接被<Route>包裹（比如作为子组件传递给其他组件），可以用withRouter来包装组件，强制注入路由相关props：

import { withRouter } from 'react-router-dom';

// ... 你的组件代码

// 用withRouter包装后导出
export default withRouter(Login);

额外修复：完善表单的onChange逻辑 #

顺便提一下，你当前的onChange函数只处理了email的输入，password的输入不会更新state，这会导致登录时password始终是空字符串。可以修改成通用的处理方式：

// 修正onChange的事件类型，同时支持多个输入框
onChange(e: React.ChangeEvent<HTMLInputElement>) {
  // 使用输入框的name属性来动态更新对应的state字段
  this.setState({
    [e.target.name]: e.target.value
  } as Pick<data, 'email' | 'password'>);
}

然后在render里的input元素加上对应的name属性：

render() {
  return (
    <form onSubmit={this.onSubmit}>
      <input
        type="email"
        name="email" // 对应state里的email字段
        value={this.state.email}
        onChange={this.onChange}
      />
      <input
        type="password"
        name="password" // 对应state里的password字段
        value={this.state.password}
        onChange={this.onChange}
      />
      <button type="submit">登录</button>
      {this.state.errors && <p>{this.state.errors}</p>}
    </form>
  );
}

最后检查登录逻辑 #

确保你的login函数在成功后返回一个真值，这样才会触发页面跳转。如果登录失败，记得更新errors状态提示用户：

onSubmit(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault();
  const user = {
    email: this.state.email,
    password: this.state.password
  };
  login(user).then(res => {
    if (res?.success) { // 根据实际返回结构调整判断条件
      this.props.history.push(`/profile`);
    } else {
      this.setState({ errors: res?.error || '登录失败，请检查账号密码' });
    }
  }).catch(err => {
    this.setState({ errors: '网络错误，请稍后重试' });
  });
}

这样修改后，你的代码应该就能正常运行，并且TypeScript的报错也会消失啦。

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