React Hook 监听路由切换实时同步渲染页面功能

场景

对于全局共用的顶部，需要在不同的路由状态下显示不同的信息。而一般情况下顶部通栏都是公共组件，一次引入各个页面通用。所以需要监听路由变化，实时渲染页面功能。

// App.tsx
export default function App() {
  return (
    <BrowserRouter>
    {/* 顶部bar在这里 */}
      <Layout />
    </BrowserRouter>
  );
}

解决

监听路由最重要的就是监听 props 中 location 对象是否发生了变化，变化了则说明路由改变了，反正则不变。

方法一

  const { pathname } = useLocation();
  useEffect(() => {
    console.log('pathname:', pathname);
    // to do
  }, [pathname]);

方法二

  const history = useHistory();
  useEffect(() => {
    console.log('history:', history); // 初始化页面的时候只会打印一次，menu变化并不会发生改变
    const unlisten = history.listen((historyLocation) => {
      console.log('historyLocation',historyLocation); // 路由变化会打印
      // to do 
    });
    return () => {
      unlisten(); // 需要卸载，否则即便当前组件已经销毁或页面已经跳转，这个方法也会一直监听路由的变化
    };
  }, [history]);

如果使用history或者history.location.pathname全局直接监听header组件的代码是不生效的，放到每个route menu那倒是可以的，

  useEffect(() => {
    console.log('history:', history); // 路由变化并不会被打印
    // to do 
  }, [history]);