一、背景介绍
七镜使用react开发页面时，用的路由库一直是React Router，2020年那会开发的项目中，切换页面传参使用的是history.push()：
<img key={index} onClick={() => history.push({ pathname: `${ROUTE_APP[0]}/${ROUTE_ITEM_MEETING_PRODUCTION_V3[0]}`, state: { current: item.pc.home[3], type: item.pc.home[4], period: item.pc.home[5] }, }) } src={item.pc.home[0]} />
从上述代码中的 current:item.pc.home[3] 可以看到参数写在state中。在后续的开发中，发现这样存在一个问题，就是当用户在这个页面复制 url 分享给其他人时，其他人打开页面根本进不去。
为解决这个问题，便有了这篇文章。
二、直接上干货
写在前头：现在已经2023年了，2020年那会React Router的版本还是4.版本，现在七镜紧跟潮流，升级到了6.版本。
- 使用 useNavigate() 钩子
const navigate = useNavigate()
- 页面跳转
<article onClick={()=>navigate(`yourpath?id=${item.id}`)}>
- 读取参数
useEffect(() => { if (location.search.includes("id=")) { let urlParams = new URLSearchParams(location.search.substring(1)) let id = urlParams.get("id") console.log(id) } }, [location.search])
切换页面传参完成
好了，现在可以直接把浏览器上的链接分享给其他人用了，而且其他人粘贴到导航栏地址栏中可以直接访问到传参后的页面。
