this.props.history.push 未定义

Question

我正在创建一个包含一些预定义值的表单，我想在提交表单后路由到仪表板页面。我在表单的 onsubmit 上使用 handleLoginSubmit func。为此，我有以下代码：

handleLoginSubmit = (e) => {
e.preventDefault();
let hardcodedCred = {
  email: "email@email.com",
  password: "password123",
};

if (
  this.state.email == hardcodedCred.email &&
  this.state.password == hardcodedCred.password
) {
  //combination is good. Log them in.
  //this token can be anything. You can use random.org to generate a random string;
  // const token = "123456abcdef";
  // sessionStorage.setItem("auth-token", token);
  //go to www.website.com/todo
  // history.push("/dashboard");
  this.props.history.push("/dashboard");

  // console.log(this.state.route);
  console.log(this.context);
  console.log("logged in");

  // <Link to={location} />;
} else {
  //bad combination
  alert("wrong email or password combination");
}


};

但是，我收到一条错误消息，指出历史未定义。请帮帮我

Answer 1

您需要使用路由器导出组件才能访问历史记录

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

export default withRouter(ComponentName)

Answer 2

如果您的组件与 Route 链接，那么您可以直接在 this.props 中访问它，但如果它的子组件或某个组件的子组件，则您无法在 this.props 中访问它.

所以有多种方法可以解决

如果该组件与 Route

<Component history={this.props.history} />

使用 withRouter HOC，绑定组件中的所有 Route 道具

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

export default withRouter(Component)

使用useHistory钩子并将其保存到常量（功能组件）

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

const history = useHistory();

this.props.history.push 未定义

this.props.history.push is undefined

history

push

reactjs

react-router