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

Posted 2021-12-23 前端小歌谣

[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'

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题