This.props.history.push не определен

Я создаю форму с некоторыми предопределенными значениями и хочу перейти на страницу панели инструментов после отправки формы. Я использую функцию handleLoginSubmit при отправке формы. Для этого у меня есть следующий код:

handleLoginSubmit = (e) => {
e.preventDefault();
let hardcodedCred = {
  email: "[email protected]",
  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.info(this.state.route);
  console.info(this.context);
  console.info("logged in");

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


};

Но я получаю сообщение об ошибке, говорящее, что история не определена. Пожалуйста, помогите мне здесь

reactjs react-router push history

25.12.2020 13:24

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

4 732

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вам нужно экспортировать компонент с маршрутизатором, чтобы получить доступ к истории

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

export default withRouter(ComponentName)

25.12.2020 13:25

если ваш компонент связан с 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();

Если вам понравился мой ответ или вы получили какую-либо помощь от моего ответа, не забудьте подумать о том, чтобы проголосовать и отметить этот ответ как лучший ответ для вас, нажав стрелку вправо, спасибо!

— 27.12.2020 15:32

25.12.2020 13:34

Обновление ответов Нишарг Шаха части 3 для дальнейшего использования.

Если вы используете react-router-dom v6, то используйте useNavigate вместо useHistory.

Вы можете использовать:

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

let navigate = useNavigate();

ИЛИ

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

function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick = {handleClick}>go home</button>
    </div>
  );
}

спасибо, но я решил эту проблему

— 19.06.2022 16:31

17.06.2022 09:24