React Router push无法跳转到Home组件问题求助

你的代码存在两个核心问题，导致push方法无法正常跳转：

1. 函数组件错误使用this：ErrorLogin是函数组件，不能通过this.props访问属性，函数组件的props是直接作为参数传入的。
2. 路由历史对象获取方式错误：即使props中传入了路由相关属性，函数组件也需要用正确方式获取history（React Router v5）或navigate（React Router v6）对象。

修复方案（React Router v5） #

方法1：使用useHistory钩子（推荐） #

直接通过React Router提供的钩子获取路由历史对象：

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

const ErrorLogin = () => {
  const history = useHistory();

  const back = () => {
    history.push("/");
  };

  return (
    <div className="wrapper">
      <h1>Error</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris
      </p>
      <button onClick={back}>Back</button>
    </div>
  );
};

export default ErrorLogin;

方法2：直接接收props参数 #

如果坚持通过props传入history，需修改组件接收方式：

import React from "react";

const ErrorLogin = (props) => {
  const back = () => {
    props.history.push("/");
  };

  return (
    <div className="wrapper">
      <h1>Error</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris
      </p>
      <button onClick={back}>Back</button>
    </div>
  );
};

export default ErrorLogin;

若使用React Router v6 #

v6已移除useHistory，改用useNavigate钩子：

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

const ErrorLogin = () => {
  const navigate = useNavigate();

  const back = () => {
    navigate("/");
  };

  return (
    <div className="wrapper">
      <h1>Error</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris
      </p>
      <button onClick={back}>Back</button>
    </div>
  );
};

export default ErrorLogin;

注意：只有被<Route>直接渲染，或被withRouter（v5）包裹的组件，才能自动获取路由相关props。如果ErrorLogin不是路由直接渲染的组件，必须用上述钩子或高阶组件处理。

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