React-router引发Invalid Hook Call错误 无版本冲突时如何排查

问题根因 #

你使用的是React Router v6版本，useNavigate Hook返回值是直接调用的导航函数，而非v5版本useHistory返回的history对象，你代码中所有history.push()的调用写法不符合v6规范，该错误会触发无效Hook的异常提示。

需要修改的代码点 #

• Header.js
  将const history = useNavigate();改为const navigate = useNavigate();，同时将logout点击事件中的history.push(/)改为navigate('/')
• CreateLink.js
  将const history = useNavigate();改为const navigate = useNavigate();，同时将mutation的onCompleted回调中的history.push("/")改为navigate("/")
• Login.js
  1. 将let history = useNavigate();改为const navigate = useNavigate();
  2. 将signup的onCompleted回调中的history.push("/create")改为navigate("/create")
  3. 将login的onCompleted回调中的history.push("/")改为navigate("/")
  4. 修正signup变量赋值错误：将variables里的name: formState.password改为name: formState.name
  5. 修正login回调取值错误：将localStorage.setItem(AUTH_TOKEN, signup.token)改为localStorage.setItem(AUTH_TOKEN, login.token)

修改完成后重启项目即可解决无效Hook报错。

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