React router v6 history.listen_react-router v6:使用searchParams导航到某个v6_react-router v6仍然无法区分'/‘和'/*’ - 腾讯云开发者社区

React router v6 history.listen

基础概念

history.listen 是 React Router v6 中的一个方法，用于监听浏览器历史记录的变化。它允许你在路由变化时执行一些操作，比如记录日志、更新页面标题等。

类型

history.listen 是一个函数，它接受一个回调函数作为参数。当路由发生变化时，这个回调函数会被调用。

应用场景

记录用户行为：通过监听路由变化，你可以记录用户在应用中的行为路径。
动态更新页面标题：根据当前路由动态更新页面标题，提升用户体验。
权限控制：在路由变化时检查用户的权限，根据权限决定是否允许访问某个页面。

示例代码

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

const history = createBrowserHistory();

history.listen((location, action) => {
  console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`);
  console.log(`The last navigation action was ${action}`);
});

function App() {
  return (
    <Router history={history}>
      {/* Your routes here */}
    </Router>
  );
}

参考链接

React Router v6 Documentation

常见问题及解决方法

1. `history.listen` 未触发

原因：可能是由于 history 对象未正确传递给 Router 组件。

解决方法：确保 history 对象正确传递给 Router 组件。

<Router history={history}>
  {/* Your routes here */}
</Router>

2. 回调函数参数不正确

原因：可能是由于回调函数的参数不正确，导致无法获取到预期的路由信息。

解决方法：确保回调函数的参数正确，通常为 location 和 action。

history.listen((location, action) => {
  console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`);
  console.log(`The last navigation action was ${action}`);
});

3. 在组件卸载后仍然监听

原因：如果在组件卸载后仍然监听路由变化，可能会导致内存泄漏。

解决方法：在组件卸载时取消监听。

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const unlisten = history.listen((location, action) => {
      console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`);
      console.log(`The last navigation action was ${action}`);
    });

    return () => {
      unlisten();
    };
  }, []);

  return <div>My Component</div>;
}

通过以上方法，你可以有效地使用 history.listen 来监听路由变化，并解决常见的相关问题。