如何监听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挂钩，它只返回您的历史记录对象。