React.FC函数组件内怎么监听路由变化

 

import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';

// 自定义的函数式组件
const MyComponent: React.FC = () => {

  // 拿到history
  const history = useHistory();

  // useEffect(effectFunc, []) 类似于 componentDidMount
  useEffect(() => {
    // 组件第一次渲染会执行这个方法
    // console.log('useEffect --- ');

    // 添加路由监听函数
    history.listen(historyLocation => {
      // 每次路由变化都会执行这个方法
      // console.log('route history , ', history);
      // console.log('route history location , ', historyLocation);
    })
  }, [history]);

  return (
    <div></div>
  );

}


export default MyComponent;

   

开发环境

"react": "^16.14.0",

"react-router-dom": "^5.2.0",