javascript - useEffect 不会在路线更改时重新渲染

Question

州

  const [searchTerm, setSearchTerm] = useState("");
  const [URL, SetURL] = useState<URL | String>();
  const [searchResults, setSearchResults] = useState([]);

重置搜索功能

  const resetSearch = () => {
    setSearchTerm("");
    setSearchResults([]);
    inputRef.current.value = ""
  }

重置查询函数

  const resetSearchQueryOnRouteChange = () => {
    SetURL(window.location.href)
    if (window.location.href != URL) {
      resetSearch();
    }
  }

使用效果

  useEffect(() => {
    resetSearchQueryOnRouteChange()
  }, [window.location.href, URL])

问题是我需要在每个路线渲染上运行 resetSearchQueryOnRouteChange() 函数，但是当我更改路线时，不会调用该函数，但该函数本身功能齐全。

如何在更改路由/网址时使该功能运行？

Answer 1

如果您不使用“react-router”，每个位置更改都会触发页面的整个重新渲染。因此，该代码块不会执行。您需要开始使用'react-router'and you'll get access to location