如何实现react路由监听
实现 React 路由监听的方法
React 路由监听可以通过多种方式实现，具体取决于使用的路由库（如 React Router v5 或 v6）。以下是常见的实现方法：
使用 React Router v5 的 history 监听
在 React Router v5 中，可以通过 history 对象直接监听路由变化：
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
history.listen((location, action) => {
console.log(`路由变化: ${action} -> ${location.pathname}`);
});
// 在组件中使用
<Router history={history}>
{/* 路由配置 */}
</Router>使用 React Router v6 的 useLocation 和 useEffect
在 React Router v6 中，可以通过 useLocation 和 useEffect 组合监听路由变化：
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
function RouteListener() {
const location = useLocation();
useEffect(() => {
console.log('路由变化:', location.pathname);
}, [location]);
return null; // 或无 UI 组件
}
// 在组件树中引入
<RouteListener />使用 React Router 的导航守卫
如果需要拦截路由跳转（如权限控制），可以通过 <Navigate> 或自定义逻辑实现：
import { Navigate, useLocation } from 'react-router-dom';
function AuthRoute({ children }) {
const location = useLocation();
const isAuthenticated = checkAuth(); // 自定义验证逻辑
if (!isAuthenticated) {
return <Navigate to="/login" state={{ from: location }} />;
}
return children;
}
// 使用方式
<AuthRoute>
<ProtectedPage />
</AuthRoute>全局路由事件监听
对于全局路由监听，可以在根组件中通过 useEffect 实现：
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
function App() {
const location = useLocation();
useEffect(() => {
// 全局路由变化处理
trackPageView(location.pathname);
}, [location]);
return <div>{/* 应用内容 */}</div>;
}自定义路由上下文
通过创建自定义路由上下文实现跨组件监听：
import { createContext, useContext, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
const RouteContext = createContext();
function RouteProvider({ children }) {
const location = useLocation();
useEffect(() => {
console.log('路由更新:', location);
}, [location]);
return (
<RouteContext.Provider value={location}>
{children}
</RouteContext.Provider>
);
}
// 在子组件中通过 useContext(RouteContext) 获取路由信息注意事项
- 在 React Router v6 中，
history.listen不再直接暴露，推荐使用useLocation。 - 避免在监听器中执行耗时操作，以防性能问题。
- 路由监听通常用于日志记录、权限控制或页面跟踪等场景。
