当前位置: 首页 > news >正文

React 中获取当前路由信息

在 React 中获取当前路由信息,根据使用的路由库不同(如 React Router v5/v6 或 Next.js),方法也有所区别。以下是常见场景的解决方案:


1. 使用 React Router v6

获取当前路径(pathname)、查询参数(search)等
import { useLocation, useParams, useSearchParams } from 'react-router-dom';function MyComponent() {// 获取路径信息(如 /users/123?name=foo)const location = useLocation();console.log(location.pathname); // "/users/123"console.log(location.search);   // "?name=foo"// 获取动态路由参数(如 /users/:id)const params = useParams();console.log(params.id); // "123"// 获取查询参数(URLSearchParams 对象)const [searchParams] = useSearchParams();console.log(searchParams.get('name')); // "foo"return <div>Current Path: {location.pathname}</div>;
}
获取路由匹配信息
import { useMatch } from 'react-router-dom';// 检查当前路由是否匹配某个路径
const match = useMatch('/users/:id');
if (match) {console.log(match.params.id); // 动态参数
}

2. 使用 React Router v5

获取路由信息
import { useLocation, useParams, useRouteMatch } from 'react-router-dom';function MyComponent() {const location = useLocation();const params = useParams();const match = useRouteMatch();console.log(location.pathname); // 当前路径console.log(params);            // 动态参数console.log(match.url);         // 匹配的URLreturn <div>Current Route: {location.pathname}</div>;
}
类组件中获取路由
import { withRouter } from 'react-router-dom';class MyComponent extends React.Component {render() {const { location, match, params } = this.props;return <div>Path: {location.pathname}</div>;}
}export default withRouter(MyComponent);

3. 在 Next.js 中获取路由

Pages Router(传统方式)
import { useRouter } from 'next/router';function MyComponent() {const router = useRouter();// 获取完整路由信息console.log(router.pathname); // "/posts/[id]"console.log(router.query);    // { id: "123" }(动态参数 + 查询参数)console.log(router.asPath);   // "/posts/123?name=foo"(浏览器显示的实际路径)return <div>Current Page: {router.pathname}</div>;
}
App Router(Next.js 13.4+)
// 在 Server Component 中
import { usePathname, useSearchParams } from 'next/navigation';export default function Page() {const pathname = usePathname();       // "/dashboard"const searchParams = useSearchParams(); // URLSearchParams 对象return <div>Path: {pathname}</div>;
}

4. 获取当前路由的额外场景

获取路由的 basename
// React Router v6
import { useMatches } from 'react-router-dom';
const matches = useMatches();
console.log(matches[0].pathname); // 包含 basename 的完整路径// Next.js (需手动处理)
const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';
监听路由变化
// React Router
useEffect(() => {const unlisten = history.listen((update) => {console.log('Route changed to:', update.location.pathname);});return unlisten; // 清理监听
}, []);// Next.js
useEffect(() => {router.events.on('routeChangeComplete', (url) => {console.log('Route changed to:', url);});
}, [router]);

5. 常见问题解决

问题:路由信息未更新
  • 原因:组件未被路由上下文包裹。
  • 解决:确保组件在 <BrowserRouter><Router> 内部:
    // 根组件中
    import { BrowserRouter } from 'react-router-dom';
    ReactDOM.render(<BrowserRouter><App /></BrowserRouter>,document.getElementById('root')
    );
    
问题:Next.js 中 router.query 初始为空
  • 原因:静态优化导致首次渲染时无参数。
  • 解决:添加加载状态判断:
    if (!router.isReady) return <div>Loading...</div>;
    

总结:按需选择方法

场景推荐 API示例
React Router v6useLocation, useParamsconst { pathname } = useLocation()
React Router v5withRouter, useRouteMatchexport default withRouter(MyComponent)
Next.js Pagesnext/routerconst router = useRouter()
Next.js App Routernext/navigationconst pathname = usePathname()
获取查询参数useSearchParams (React Router)const [params] = useSearchParams()
监听路由变化history.listen 或 Next.js 事件router.events.on('routeChangeComplete', ...)

根据你的路由库选择对应方法即可准确获取当前路由信息!

http://www.xdnf.cn/news/1210591.html

相关文章:

  • 2.oracle保姆级安装教程
  • 《零基础入门AI:传统机器学习入门(从理论到Scikit-Learn实践)》
  • 如何解决人工智能在社会治理中面临的技术和伦理挑战?
  • 网络原理--HTTPHTTPS
  • AI产品经理手册(Ch3-5)AI Product Manager‘s Handbook学习笔记
  • PyCharm插件开发与定制指南:打造个性化开发环境
  • FSMC的配置和应用
  • SpringBoot集成deepseek
  • Export useForm doesn‘t exist in target module
  • vue3组件通信的几种方法,详解
  • 05动手学深度学习(下)
  • Linux - 权限的理解(深入浅出,详细细微)
  • 书籍推荐算法研究
  • gRPC性能陷阱:低延迟网络下的客户端瓶颈揭秘
  • Spark SQL 数组函数合集:array_agg、array_contains、array_sort…详解
  • Zynq SOC FPGA嵌入式裸机设计和开发教程自学笔记:GPIO扩展与中断控制技术,万字详解!!
  • 【变更性别】
  • TCPDump实战手册:协议/端口/IP过滤与组合分析指南
  • ESP32学习-1.第一个程序helloworld
  • 子数组和 问题汇总
  • FPGA实现SRIO高速接口与DSP交互,FPGA+DSP异构方案,提供3套工程源码和技术支持
  • Linux_库制作与原理浅理解
  • Python高效历史记录管理:保存最后N个元素的完整指南
  • 【CSS】盒子类型
  • 功率场效应晶体管MOSFET关键指标
  • leaflet中绘制轨迹线的大量轨迹点,解决大量 marker 绑定 tooltip 同时显示导致的性能问题
  • 车载刷写架构 --- 刷写思考扩展
  • Redis的持久化策略-AOF和RDB(详细图解)
  • Java面试宝典:MySQL8新特性底层原理
  • Vue2 vs Vue3:核心差异与升级亮点