javascript - 如何在 react-router-dom v6 中监听路由变化

Question

我正在尝试将旧的 react 路由器 dom 代码迁移到 v6，我想知道如何监听路由变化，我现在使用 useHistory

const history = useHistory()
//then
history.listen(...)

我确实阅读了新文档，发现 useHistory已更改为 useNavigate

const navigate = useNavigate()
//then
navigate.listen(...) // listen is not a function

你能帮我找到一种方法来收听v6中的路线变化吗

// This is a React Router v6 app
import { useNavigate } from "react-router-dom";

function App() {
  let navigate = useNavigate();
  function handleClick() {
    navigate("/home");
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

Answer 1

从文档(https://reactrouter.com/docs/en/v6/hooks/use-location)中，使用这个钩子(Hook)

let location = useLocation();

React.useEffect(() => {
  ga('send', 'pageview');
}, [location]);