如何监听REACT-ROUTER-DOMV6中的路由更改

how to listen for route change in react-router-dom v6(如何监听REACT-ROUTER-DOMV6中的路由更改)

问题描述

我正在尝试将旧的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>
  );
}

推荐答案

navigate函数是函数，而不是像旧的react-router-dom版本5的history对象那样的对象。

您仍然可以创建自定义history对象，但您需要创建自定义路由器才能使用它。这允许您导入history对象并创建侦听程序。

创建自定义路由器示例，使用其中一个较高级别的路由器作为它们如何管理位置和状态的示例，即BrowserRouter：

const CustomRouter = ({ history, ...props }) => {
  const [state, setState] = useState({
    action: history.action,
    location: history.location
  });

  useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      {...props}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
};

在代码中创建新的自定义路由器和其他组件使用的自定义history对象。

const history = createBrowserHistory();
export default history;

使用您的路由器并将您的历史记录对象传递给它。

import CustomRouter from '../CustomRouter';
import history from '../myHistory';

...

<CustomRouter history={history}>
  ....
</CustomRouter>

在要侦听其位置更改的组件中，导入您的历史记录对象并像以前一样调用listen回调。

import history from '../myHistory';

...

useEffect(() => {
  const unlisten = history.listen((location, action) => {
    // ... logic
  });

  return unlisten;
}, []);

如果需要，您还可以创建自己的useHistory挂钩，它只返回您的历史记录对象。

这篇关于如何监听REACT-ROUTER-DOMV6中的路由更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！