react 列表页与详情页跳转带参数

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了react 列表页与详情页跳转带参数，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1283字，纯文字阅读大概需要2分钟。

内容图文

react hooks 

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

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

列表页 发起

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])

 

内容总结

以上是互联网集市为您收集整理的react 列表页与详情页跳转带参数全部内容，希望文章能够帮你解决react 列表页与详情页跳转带参数所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---