В Reactjs почему «история» неопределенной ошибки - PullRequest
2 голосов
/ 11 марта 2020

У меня есть этот функциональный компонент.

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

function ProfileForm(props) {
const form = useForm();
const {
register,
handleSubmit,
errors
  } = form;
const history = useHistory(); // TypeError: Cannot read property 'history' of undefined 
......
    }

Почему эта ошибка? Кстати, я установил реакцию-роутер-дом. Как использовать историю в функциональных компонентах?

Обновить больше кода: -

 axios.post('http://localhost:8080/profile', profile)
  .then(res => {
    history.push({
      pathname: "/OnSubmit",
      state: {
        response: res.data,
        msgVariant: "success"
      }
    })
  }).catch((error) => {
    // handle this error
    history.push({
      pathname: "/OnSubmit",
      state: {
        response: error.message,
        msgVariant: "danger"
      }
    })
  })

Позже я использую историю, как указано выше?

1 Ответ

2 голосов
/ 12 марта 2020

Будь то функциональный компонент или компонент класса, для работы истории маршрутизатора этот компонент должен быть дочерним по отношению к компоненту Маршрутизатор.

Нам нужно сделать что-то вроде этого,

    import {
      BrowserRouter as Router
    } from "react-router-dom"

    //and then, wherever we want to use `history`, we need to have it nested under this <Router />
   <Router>
    <SomeOtherComponent>
       ...
          <ComponentWhereWeWantToUseHistory />
       ...
    </SomeOtherComponent>
  </Router>

Надеюсь, это поможет. Удачного кодирования:)

...