[react-router] React-Router怎么获取URL的参数？

最新推荐文章于 2024-08-03 09:43:30 发布

前端小歌谣

最新推荐文章于 2024-08-03 09:43:30 发布

阅读量3.3k

点赞数

分类专栏： # 前端面试题react-router 文章标签： react.js 前端 reactjs

本文链接：https://blog.csdn.net/weixin_43392489/article/details/121537186

版权

本文介绍了在React-Router中如何在类组件和函数式组件中获取URL参数，包括使用`params`和`search`。同时，作者歌谣分享了个人简介，表示愿意与大家交流前端知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[react-router] React-Router怎么获取URL的参数？

通过params
- 类组件：在保证props能获取到路由信息的前提下（如果不是直接嵌套在<Route/>下，需要使用withRouter的HOC），通过this.props.match.params获取
- 函数式组件：const params = useParams();
通过search,demo如下：

// query传参
this.props.history.push({
    pathname: 'list',
    search: qs.stringify({
        a: 123,
    }),
})
// 取值
import qs from 'qs';
// 类组件中取值
const paramStr = this.props.location.search.slice(1);
qs.parse(paramStr); // {a: '123'}
// 在函数式组件中取值
const location = useLocation();
const paramStr = location.search.slice(1);
qs.parse(paramStr); // {a: '123'}