reactjs - 在 Reactjs 中为什么 'history' 未定义错误

Question

我有这个功能组件。

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 
......
    }

为什么会出现这个错误？顺便说一句，我安装了 react-router-dom。如何在功能组件中使用历史？

更新更多代码:-

 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"
      }
    })
  })

后来我像上面一样使用历史？

Answer 1

无论是功能组件还是类组件，要使路由器历史记录工作，该组件必须是路由器组件的子组件。

我们需要做这样的事情，

    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>

我希望它有帮助。快乐编码:)