739.【前端】React切换页面传参

一、背景介绍

七镜使用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.版本。

1. 使用 useNavigate() 钩子

    const navigate = useNavigate()

2. 页面跳转

<article onClick={()=>navigate(`yourpath?id=${item.id}`)}>

3. 读取参数

useEffect(() => {
        if (location.search.includes("id=")) {
            let urlParams = new URLSearchParams(location.search.substring(1))
            let id = urlParams.get("id")
            console.log(id)
        }
    }, [location.search])

4. 切换页面传参完成

   
   
   

   好了，现在可以直接把浏览器上的链接分享给其他人用了，而且其他人粘贴到导航栏地址栏中可以直接访问到传参后的页面。