自定义函数中使用useNavigate()触发React Hook报错，求原因解析

你的代码报错核心原因是违反了React Hook的调用规则：

• useNavigate是React Router提供的Hook，必须满足Hook规则才能调用：只能在React函数组件的顶层，或者以use开头命名的自定义Hook的顶层调用。
• 你写的SearchReq是个普通工具函数，既不是首字母大写的React组件（组件要求返回JSX/React元素），也不是以use开头的自定义Hook，所以在里面调用useNavigate会直接触发错误。

两种可行的解决办法： #

办法一：改成自定义Hook

把SearchReq改成符合规则的自定义Hook，命名以use开头，这样就能合法调用useNavigate：

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

export default function useSearchReq() {
  const navigate = useNavigate();
  
  return function(searchTerm: string) {
    if (searchTerm === "") return;
    console.log(searchTerm);
    navigate(`/search?searchTerm=${searchTerm}`, { replace: true });
  };
}

在组件里这样用：

import useSearchReq from './useSearchReq';

function SearchBar() {
  const searchReq = useSearchReq();
  
  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    searchReq("要搜索的内容");
  };
  
  return (
    <form onSubmit={handleSearch}>
      <button type="submit">搜索</button>
    </form>
  );
}

办法二：将navigate作为参数传入普通函数

把navigate从组件里拿到，作为参数传给SearchReq这个普通工具函数：

export default function SearchReq(searchTerm: string, navigate: any) {
  if (searchTerm === "") return;
  console.log(searchTerm);
  navigate(`/search?searchTerm=${searchTerm}`, { replace: true });
}

在组件里调用时传入navigate：

import { useNavigate } from "react-router-dom";
import SearchReq from './SearchReq';

function SearchBar() {
  const navigate = useNavigate();
  
  const handleSearch = () => {
    SearchReq("要搜索的内容", navigate);
  };
  
  return <button onClick={handleSearch}>搜索</button>;
}

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