react-router-dom 监听路由变化

在React中使用`react-router-dom`监听路由变化通常涉及以下几个步骤[^1]:
1. 引入所需的模块：

   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

2. 使用`BrowserRouter`作为应用的顶级路由器组件：

   <Router>
     {/* 路由配置和组件 */}
   </Router>

3. 如果你想在整个应用中监听路由更改，可以使用`withRouter`高阶组件，它提供了当前的路由信息：

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

   // 在App.js中使用withRouter
   class App extends React.Component {
     render() {
       return (
         {/* 当路由发生变化时，this.props.location将更新 */}
         <div>
           {/* 渲染依赖当前路径的组件 */}
         </div>
       );
     }
   }

   const EnhancedApp = withRouter(App);

当你切换路由时，`EnhancedApp`组件内的`props.location`属性会反映出新的URL和路由状态变化。这样你就可以根据路由改变执行相应的操作。