useNavigate() 打破了钩子

Question

我做了一个简单的反应钩子。

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

export default function SearchReq(searchTerm: string) {
  if (searchTerm === "") return;
  const navigate = useNavigate();
  console.log(searchTerm);
  // window.location.href = "/search?searchTerm=" + searchTerm;
  navigate("/search?searchTerm=" + searchTerm, { replace: true });
}

但出于某种原因，它给了我一个错误，我发现导致错误的行是const navigate = useNavigate()，但我不明白为什么有人能向我解释一下？

这是错误：

Answer 1

在组件的根级别定义挂钩。返回声明之前

export default function SearchReq(searchTerm: string) {

  const navigate = useNavigate();  

  // window.location.href = "/search?searchTerm=" + searchTerm;

  useEffect(() => {
        if(searchTerm)  navigate("/search?searchTerm=" + searchTerm, { replace: true });

  }, [searchTerm])

  return null
}

Answer 2

要使用 useNavigate 挂钩，您需要确保您的 React 组件在 react-router 库中的 Router 组件内呈现。

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

function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/some/other/route");
  };

  return (
    <button onClick={handleClick}>
      Go to some other route
    </button>
  );
}

function App() {
  return (
    <Router>
      <MyComponent />
    </Router>
  );
}

要求编辑：

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

function MyComponent() {
  const navigate = useNavigate();

  // Navigate to a different route when the button is clicked
  const handleClick = () => {
    navigate("/some/other/route");
  };

  return (
    <button onClick={handleClick}>
      Go to some other route
    </button>
  );
}