从Instagram打开Next.js页面时出现客户端错误

hsgswve4  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(124)

我一直在使用Next.js构建我的个人投资组合,一切似乎都很顺利。但是,如果我尝试将此网站链接到我的Instagram个人信息,它会打开以下内容:

Application error: a client-side exception has occurred

(see the browser console for more information).

经过进一步的调查,我发现我的个人简历上的链接并不是用户点击的链接,因为Meta在末尾添加了?fbclid=<some value>。我已经找到了fbclid is a query parameter used by Meta for analytics,但是在我的个人简历的URL中隐含的(并且看起来不可改变的)包含它不知何故打破了我的页面。
有没有办法避开这个参数,或者在页面的代码中解决它?
(Side注意:我最近在我的网站上安装了Vercel Web Analytics script--这可能与它有关吗?)
如果我在删除参数 * 后 * 再次在手机上导航到该页面,它会修复这个问题。
编辑:我试着将参数分解成一个变量,看看这是否能解决问题,但无济于事:

const router = useRouter()
useEffect(() => {
    if (!router.isReady) { return } else {
        if (router.query) {
            const fbclid = router.query.fbclid ? router.query.fbclid : ""
        }
    }
}, [router])
r1zhe5dt

r1zhe5dt1#

我想办法解决了。Meta将添加fbclid查询参数,但如果检测到这一点,您可以简单地将用户重新路由到他们希望使用useEffect()的任何页面的普通版本。从程序上看,这看起来像...

const router = useEffect(() => {
    if (!router.isReady) { return } else {
        if (router.query && router.query["fbclid"]) {
            // replace with the URL you'd like to redirect them to, e.g. your home page
            window.location = "https://your.home.page/"
        }
    }
}, [router])

相关问题