在App组件中引入withRouter高阶组件,并包裹在export default语句中,如下所示:
import React, { useEffect } from 'react';
import { withRouter } from 'react-router-dom';
import MyComponent from './MyComponent';
function App(props) {
useEffect(() => {
console.log('Page refreshed');
}, [props.location]);
return (
);
}
export default withRouter(App);
这样,withRouter将向App组件传递路由属性,使得我们可以在useEffect中监听路由变化。在useEffect中需要传入props.location作为依赖项,以确保每次路由变化都会触发useEffect。