react如何获取URL中参数
react获取URL中参数
这个问题想必很多人都会遇到过，这里我说一下怎么获取URL中的参数。
react 获取URL原理
在 react 组件的 componentDidMount 方法中打印一下 this.props，在浏览器控制台中查看输出如下：
其中页面的 url 信息全都包含在 match 字段中，
以地址 localhost:3000/app/knowledgeManagement/modify/STY20171011124209535/3/1507701970070/0/?s=1&f=7 为例
其中各个参数定义对应如下：
localhost:3000/app/knowledgeManagement/modify/:studyNo/:stepId/:randomNum/:isDefault/?s=&f=
首先打印 this.props.match ：
可以看到 this.props.match 中包含的 url 信息还是非常丰富的，其中
history： 包含了组件可以使用的各种路由系统的方法，常用的有 push 和 replace，两者都是跳转页面，但是 replace 不会引起页面的刷新，仅仅是改变 url。location： 相当于URL 的对象形式表示，通过 search 字段可以获取到 url 中的 query 信息。（这里 state 的含义与 HTML5 history.pushState API 中的 state 对象一样。每个 URL 都会对应一个 state 对象，你可以在对象里存储数据，但这个数据却不会出现在 URL 中。实际上，数据被存在了 sessionStorage 中）（参考： 深入理解 react-router 路由系统）match： 包含了具体的 url 信息，在 params 字段中可以获取到各个路由参数的值。
通过以上分析，获取 url 中的指定参数就十分简单了
下面是几个例子
// localhost:3000/app/knowledgeManagement/modify/STY20171011124209535/3/1507701970070/0/?s=1&f=7
// localhost:3000/app/knowledgeManagement/modify/:studyNo/:stepId/:randomNum/:isDefault/?s=1&f=7
// 获取 studyNo
this.props.match.match.params.studyNo // STY20171011124209535
// 获取 stepId
this.props.match.match.params.stepId // 3
// 获取 success
const query = this.props.match.location.search // '?s=1&f=7'
const arr = query.split('&') // ['?s=', 'f=7']
const successCount = arr[0].substr(3) // '1'
const failedCount = arr[1].substr(2) // '7'
注意点：
如果这个值需要在页面中及时获得，这个时候就需要注意了，我们都知道react是有生命周期的，那么什么时候获取URL的值最合适呢？
这个我推荐在componentDidMount 这个生命周期的时候去获取，因为这个时候页面已经挂在好了，完全可以拿到URL上面的值。
react获取页面跳转URL携带的参数
比如这里有一条携带参数的url。http://baidu.com?type=1
我们要取出type的值。
因为获取页面跳转url携带的参数比较常用，所以我们把它封装成一个工具函数。
在src根目录下新建一个文件util.js
封装一个获取url参数的函数。
export function getUrlParams(name, str) {
const reg = new RegExp(`(^|&)${ name}=([^&]*)(&|$)`);
const r = str.substr(1).match(reg);
if (r != null) return decodeURIComponent(r[2]); return null;
}使用的时候，在当前页面导入这个函数
import { getUrlParams } from '../../util'接下来就可以在componentDidMount之中获取这个type值
componentDidMount(){
const type = getUrlParams ('type',this.props.location.search);
this.setState({
type //设置state
})
} 很简单，但是记一下
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
React中useCallback useMemo到底该怎么用
在React函数组件中，当组件中的props发生变化时，默认情况下整个组件都会重新渲染。换句话说，如果组件中的任何值更新，整个组件将重新渲染，包括没有更改values/props的函数/组件。在react中，我们可以通过memo，useMemo以及useCallback来防止子组件的rerender2023-02-02
这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程（安卓部分）为例，给大家分析 React Native 的启动流程，需要的朋友可以参考下2021-08-08
Hooks 发布之后，函数组件能拥有自己的 state，React提供了很多内置的Hooks，这篇文章就来和大家介绍一下useState 和 useEffect的使用，需要的可以参考一下2023-06-06
React Router v6 的路由懒加载有2种实现方式,1是使用react-router自带的 route.lazy,2是使用React自带的 React.lazy,下面我们就来看看它们的具体实现方法吧2024-04-04
react axios配置代理(proxy),如何解决本地开发时的跨域问题
这篇文章主要介绍了react axios配置代理(proxy),如何解决本地开发时的跨域问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
React-router v6在Class组件和非组件代码中的正确使用
这篇文章主要介绍了React-router v6在Class组件和非组件代码中的正确使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
React中super()和super(props)的区别小结
本文主要介绍了React中super()和super(props)的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-03-03
解决React报错React.Children.only expected to rece
这篇文章主要为大家介绍了React报错React.Children.only expected to receive single React element child分析解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
深入理解React Native核心原理(React Native的桥接（Bridge)
这篇文章主要介绍了深入理解React Native核心原理(React Native的桥接（Bridge),本文重点给大家介绍React Native的基础知识及实现原理，需要的朋友可以参考下2021-04-04
React Hooks 提供了一种在函数组件中使用状态和其他 React 特性的方式,而不需要编写类组件,Vue 的生命周期函数和 React Hooks 之间有一定的对应关系,本文给大家介绍了React Hooks中模拟Vue生命周期函数的指南,需要的朋友可以参考下2024-10-10
最新评论