将查询字符串添加到应用程序中的所有链接

Question

情况是这样的...我有一个 Next.js 应用程序已经运行了一段时间，我们已经编写了大量代码。

最近我们开始投放一些广告，我们需要了解它们的效果...

有人可以通过这两个网址中的任何一个登陆我们的网站。

www.site.com/page // user came to our site NOT from ad
www.site.com/page?ad=campaign1 // user came from one of our ads.

如果用户使用“广告”查询字符串访问我们的网站，我想将其附加到我们网站上的所有链接。

我将如何在 react/nextjs 中做到这一点？我们已经构建了大量组件，甚至在一些博客文章中我们只是在渲染原始 HTML。

无需编辑无数组件。我将如何将查询字符串附加到所有链接？

谢谢

Answer 1

您可以创建一个自定义Link 组件，作为next/link 的包装器，它将检查查询字符串并将其添加到Next.js 的href 中Link。

// components/link.jsx

import NextLink from 'next/link';
import { useRouter } from 'next/router';

const Link = ({ children, href }) => {
  const router = useRouter();
  const [, queryString] = router.asPath.split('?');
  const hrefWithQuery = `${href}${queryString ? `?${queryString}` : ''}`;
  return <NextLink href={hrefWithQuery}>{children}</NextLink>;
};

export default Link;

然后将所有 next/link 的导入替换为新组件的路径，无论它们在哪里使用（简单的搜索和替换就可以了）。