URLSearchParams解决列表页与详情页跳转带参数

最新推荐文章于 2024-08-23 16:20:23 发布

Embrace924

最新推荐文章于 2024-08-23 16:20:23 发布

阅读量925

点赞数

分类专栏： typescript react 文章标签： react useLocation typescript URLSearchParams

本文链接：https://blog.csdn.net/embrace924/article/details/115162336

版权

react 同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

typescript

2 篇文章 0 订阅

订阅专栏

本文介绍了在React应用中如何使用URLSearchParams和URL API来在列表页跳转到详情页并保持参数，即使在页面刷新后仍能获取参数。通过设置搜索参数并利用useHistory和useLocation钩子，可以在详情页正确接收和处理这些参数，实现数据请求。此外，还提供了示例代码展示具体实现过程。

摘要由CSDN通过智能技术生成

案例使用场景：

列表页跳转详情页带上id 等参数

详情页获取参数判断是否有值有值的情况下请求数据

在react 里面也提供了各种获取query和search的方法，params需要拼接字符串，query 和 state 方式经过刷新之后不能获得之前传递的参数值

这里提供另外一种可以刷新后也获取数据的浏览器内置的API接口

这个API就是URLSearchParams()以及URL()。

// 从整个 url 获取
new URL('https://blog.csdn.net/Embrace924/wordpress?id=924
').searchParams.get('id');


// 从 url 参数部分 获取
new URLSearchParams('?id=924').get('id');

URLSearchParams()以及URL()，还有更多的用法：https://www.zhangxinxu.com/wordpress/2019/08/js-url-urlsearchparams/

此处阐述一下该案例情况下使用方法

列表页发起

1.跳转的地方

<a  key='info'
    onClick={() => {
      history.push({
         pathname: '/list/list-detail',
         search: `?id=${id}&type=view`
       })
    }}>
    查看详情
</a>

2.history 来源

import { useHistory } from 'react-router-dom'
 
const TableList: React.FC = () => {
 
const history = useHistory()

}

详情页接收

1.接收history里的search字段

在react 中获取

import { useLocation } from 'react-router-dom'

// 列表页传入  详情页接收的字段
export interface ILocationState {
  id: string
  type: string
}

const DetailForm: React.FC = () => {
  const location = useLocation<ILocationState>()
  const params = new URLSearchParams(location.search)
  const id = params.get('id')

 }

案例：浏览器控制台Console 测试

https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams/URLSearchParams

 var url = new URL('https://example.com?foo=1&bar=2');
 var params = new URLSearchParams(url.search);

 params.get('foo') => 1
 params.get('bar') => 2

2.判断参数是否有值有值的情况下handleInfo请求数据存当前id

  const [detailId, setDetailId] = useState('')

  useEffect(() => {
    if (
      params.get('id') !== '' &&
      params.get('id') !== undefined &&
      params.get('id') !== null
    ) {
       handleInfo(params.get('id'))
       setDetailId(params.get('id'))

    } else {
       setDetailId('')
     }
  }, [detailId])