React获取url参数的几种方法
2024-08-31
74
在React中获取URL参数的方法有以下几种:
使用window.location.search
const searchParams = new URLSearchParams(window.location.search);
const id = searchParams.get('id');
使用react-router-dom
如果使用了react-router-dom路由库,则可以使用useParams钩子来获取URL参数。例如,如果的URL路径为/users/:id,可以像这样获取id参数:
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
return <div>{id}</div>;
}
使用query-string库
可以使用query-string库来解析URL查询参数。
import queryString from 'query-string';
const values = queryString.parse(window.location.search);
const id = values.id;
无论选择哪种方法,都应该首先确保在访问参数之前进行参数存在性检查,以避免潜在的错误。
更新于:2个月前赞一波!
相关文章
- react使用echart图文教程
- 国外流行的前端框架有哪些?
- react前端基础面试题和答案
- React路径不变location.search参数改变不触发useEffect
- 在IIS部署React前端项目
- React Error: Exceeded timeout of 5000 ms for a test. 错误
- React @testing-library UserEvent.paste用法更新到14版本后不生效
- @testing-library/react单元测试getBy queryBy和findBy的区别
- react监听路由变化
- Vue和React怎么选?
- react hooks获取url参数
- react单元测试模拟点击浏览器返回按钮时触发popstate事件
- react基础面试问题
- react获取url参数 忽略参数名大小写
- react获取url参数不区分大小写
- 如何在React中使用路由?
- 如何在 React 中使用 GraphQL
- 前端学react还是vue?
- 如何在React中使用Redux?
- 如何在React使用TypeScript?
文章评论
评论问答