类组件中this.props.history.push('/')失效及props.location.state问题求助

一、路由跳转失效问题（this.props.history.push无法使用） #

React Router v6 不再给类组件自动注入history、location等路由相关props，也移除了旧版本的withRouter高阶组件，导致直接调用this.props.history.push无效果，类组件也无法直接使用useNavigate钩子。

解决方法： #

1. 自定义withRouter高阶组件注入路由能力

先封装一个withRouter组件，把路由相关的方法和状态通过props传给类组件：

import { useNavigate, useLocation, useParams } from 'react-router-dom';

const withRouter = (Component) => {
  const Wrapper = (props) => {
    const navigate = useNavigate();
    const location = useLocation();
    const params = useParams();
    return <Component {...props} navigate={navigate} location={location} params={params} />;
  };
  return Wrapper;
};

然后修改AddContact组件的导出语句：

export default withRouter(AddContact);

最后在add方法里替换跳转逻辑：

add = (e) => {
  e.preventDefault();
  if (this.state.name === "" || this.state.email === "") {
    alert("All fields are required!");
    return;
  }
  this.props.addContactHandler(this.state);
  this.setState({ name: "", email: "" });
  // 替换history.push为navigate
  this.props.navigate("/");
};

2. 用函数组件包裹类组件传递navigate

如果不想写高阶组件，可以用一个函数组件作为中间层，把navigate函数传给类组件：

import { useNavigate } from 'react-router-dom';
import AddContact from './AddContact';

const AddContactWrapper = (props) => {
  const navigate = useNavigate();
  return <AddContact {...props} navigate={navigate} />;
};

export default AddContactWrapper;

之后在路由配置中使用AddContactWrapper而非原AddContact组件，类组件内同样用this.props.navigate("/")完成跳转。

二、props.location.state.contact无法读取问题 #

出现这个问题通常有两个原因：跳转时未正确传递state数据，或者直接访问页面导致location.state为undefined，直接读取contact会触发报错。

解决方法： #

1. 确保跳转时正确传递state

从其他页面跳转到AddContact时，必须通过路由方法携带state，例如：

// 函数组件中使用useNavigate
const navigate = useNavigate();
navigate('/add', { 
  state: { 
    contact: { name: '示例名称', email: 'example@test.com' } 
  } 
});

// 类组件（已通过withRouter注入navigate）
this.props.navigate('/add', { 
  state: { 
    contact: { name: '示例名称', email: 'example@test.com' } 
  } 
});

2. 读取时添加存在性判断

在AddContact组件中读取state前，先判断location.state是否存在，避免报错：

// 例如在render方法中处理
render() {
  const { location } = this.props;
  // 使用可选链操作符和默认值，确保不会因为state不存在报错
  const contact = location.state?.contact || {};
  const { name, email } = contact;

  return (
    // 你的组件内容...
  );
}

如果是在组件的其他方法中读取，同样需要先判断this.props.location.state是否存在，再访问contact。

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