使用react-router-dom的useHistory跳转时报unexpected use of history错误如何解决

你虽然在顶部引入了react-router-dom的useHistory Hook，但没有在Login组件内部调用该Hook获取history实例，代码中直接使用的history变量没有被定义，因此触发该错误。

1. 在Login组件内部的顶层位置（state声明之后、自定义函数声明之前）调用useHistory获取实例，新增代码如下：

const history = useHistory()

修正后的组件开头部分示例：

function Login() {
    const [username, setUsername] = useState("")
    const [password, setPassword] = useState("")
    const [data, setData] = useState(null)
    // 新增以下代码调用useHistory
    const history = useHistory()

    // 后续原有代码不变
    // ...
}

2. （可选优化）你当前的代码存在逻辑时序问题：表单绑定了onSubmit提交事件会发送登录请求，同时登录按钮单独绑定了loginUser事件会直接请求用户信息，可能出现登录请求还没完成、用户信息校验就已经执行的情况，建议将两段逻辑合并，把跳转逻辑放到登录请求成功的回调中：

const onSubmit = (e) => {
  e.preventDefault()
  const users = {
    username: username,
    password: password
  }
  axios.post('http://localhost:4000/users/login', users, {
    withCredentials: true
  })
  .then(res => {
    if(res.status === 200) {
      // 登录成功直接跳转，无需额外再请求用户信息校验
      history.push("/home")
    }
  })
}

调整后可以删除按钮上的onClick={loginUser}绑定，避免重复触发请求。

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