使用 React Router v6 进行导航的事件侦听器

Question

我想向 React Router v6 中的 navigate 事件添加一个事件侦听器。我还没有找到任何东西。有这样的功能吗？

编辑：处理事件时，我想阻止导航并将用户路由到另一个目的地，这取决于他来自哪里。

Answer 1

您可以 useLocation() 和 useEffect ()。

const location = useLocation();
useEffect(() => {
   console.log("url changed")
}, [location]);

Answer 2

一旦位置发生变化，您可能会只使用导航功能，

const location = useLocation();
const navigate = useNavigate();
useEffect(() => {
   navigate("/home") // enter your route here
}, [location]);

这对用户来说看起来非常难看，但

如果您只是想阻止导航，react-router v6 中有一个名为 useBlocker 的新钩子，可用于在指定的布尔值为 true 时显示警报。请参阅此处的 React Router Dom - v6 - useBlocker 问题