react router-dom监听路由变化

在React Router DOM中，监听路由变化通常通过`useEffect` hook或者`onRouteChangeComplete`生命周期方法来实现。这里是一个简单的例子：

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

function MyComponent() {
  const location = useLocation(); // 使用useLocation获取当前路由信息

  useEffect(() => {
    console.log('路由已改变:', location.pathname); // 当路由发生变化时，这个函数会被再次触发
    // 在这里你可以执行你需要响应路由变化的操作，比如更新状态、发送API请求等
  }, [location]); // 列表包含location，只有当location改变时，effect才会运行

  return (
    <Router>
      {/* ... */}
    </Router>
  );
}

export default MyComponent;

在这个例子中，每当路由路径(`pathname`)发生变化，`useEffect`里的回调函数就会被执行。

相关问题

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和路由状态变化。这样你就可以根据路由改变执行相应的操作。

react-router-dom 4 路由监听

React Router DOM 4中，我们可以通过监听路由的变化来执行相应的操作。React Router DOM 提供了一个名为`history`的属性，它允许我们访问路由的历史记录。

要监听路由的变化，我们可以使用`history`对象的`listen`方法。使用`listen`方法，我们可以传递一个回调函数，该函数会在每次路由变化时被调用。

示例代码如下：

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

history.listen((location, action) => {
  console.log('路由变化：', location.pathname);
  console.log('操作类型：', action);
});

在以上代码中，我们使用`history.listen`方法来监听路由的变化。当路由变化时，回调函数将会被调用，并传递两个参数：`location`和`action`。

`location`参数包含了当前路由的信息，例如`pathname`（路径名称）、`search`（查询参数）等。通过`location.pathname`，我们可以获取当前的路径名称。

`action`参数表示了路由的操作类型，可以是`POP`（后退）、`PUSH`（前进）或`REPLACE`（替换）。

在回调函数中，你可以执行任何你想要的操作，例如更新界面或发送网络请求。