使用 React 路由器 (v6) 为什么我不能直接调用 useNavigate？答案

【问题标题】：Using React router (v6) why can't I call useNavigate directly?使用 React 路由器 (v6) 为什么我不能直接调用 useNavigate？
【发布时间】：2021-10-29 15:24:29
【问题描述】：

我是 React JS 的新手，对 TypeScript 不是 100% 熟悉。在我学习的过程中，我发现自己无法理解一个奇怪的“怪癖”。

我的代码如下，我的问题是“为什么我必须为 useNavigate 创建一个 const 然后在我的方法中调用它？

import { useNavigate } from 'react-router-dom';
...
 const navigate = useNavigate();
  const handleAskQuestionClick = () => {
    navigate('ask');
  };
...

我错过了什么，为什么不能这样？

  const handleAskQuestionClick = () => {
    useNavigate('ask');
  };

【问题讨论】：

useNavigate 正在返回您分配给navigate 的函数。新函数不等于返回它的函数。
@DBS，谢谢你说得有道理。那么在我声明 const 'navigate' 之前，useNavigate 是否没有完全定义？奇怪的是只给出了一个函数名但没有签名并且没有定义任何参数，但 React 知道如何处理我的参数

标签： reactjs react-hooks react-router

【解决方案1】：

这里有两个方面需要说明。一个是为什么你不能用参数调用useNavigate，另一个是为什么你不能在另一个函数中调用useNavigate。

useNavigate 是一个 React 钩子。 rules of hooks 规定您必须调用组件顶层的所有钩子。它们不能有条件地调用，也不能在像 handleAskQuestionClick 函数这样的回调中调用。

useNavigate 需要是一个钩子，因为它在内部依赖 useContext 钩子通过 React context 访问您的路由器状态（BrowserRouter 组件是一个上下文提供者）。它不能只是一个普通的函数，因为那样它就会违反钩子本身的规则。所以react-router 给了你这个useNavigate 钩子，它访问你的路由器状态并返回一个绑定到那个状态的普通函数。从useNavigate 返回的函数可以在回调中调用，因为它不是钩子。

钩子不能被有条件地调用，所以像uesNavigate('ask')这样的操作是没有意义的，除非你想在组件被渲染时立即导航到那个页面（重定向）。

【讨论】：