reactrouter监听路由变化_监听history.push/replaceState和local/sessionStorage变化

React Router提供了一些API用于监听路由变化。你可以使用 `useHistory` hook 监听 `history` 对象上的 `listen` 方法。当路由发生变化时，此方法将被调用。

例如，以下示例将打印路由变化的信息：

import { useHistory } from 'react-router-dom';

function App() {
  const history = useHistory();

  useEffect(() => {
    const unlisten = history.listen((location) => {
      console.log(`New URL: ${location.pathname}${location.search}${location.hash}`);
    });
    return () => unlisten();
  }, [history]);

  return (
    // your app content
  );
}

如果你想要监听 `localStorage` 或 `sessionStorage` 的变化，你可以使用 `window.addEventListener` 方法。

例如，以下示例将在 `localStorage` 中设置一个值，并在值变化时打印：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const handleStorageChange = (event) => {
      if (event.key === 'myKey') {
        console.log(`New value for myKey: ${event.newValue}`);
      }
    };
    window.addEventListener('storage', handleStorageChange);
    return () => window.removeEventListener('storage', handleStorageChange);
  }, []);

  useEffect(() => {
    localStorage.setItem('myKey', 'myValue');
  }, []);

  return (
    // your app content
  );
}