Add query string to ALL links in application

Question

Here is the situation... I have a Next.js app that has been up for a bit, we have a ton of code already writen.

Recently we started running some ads and we need to understand how they are doing...

Someone could land on our site with either of the two URLs.

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.

If a user comes to our site with the "ad" querystring, I would like to append that to ALL links on our site.

How would I go about doing that in react/nextjs? we have a ton of components already built and even some blog posts where we are just rendoring raw HTML.

Without going and editing a zillion components. How would I go about appending the query string to all links?

Thanks

this might be solution to your problem - stackoverflow.com/a/61470662/4481312 — marmeladze
– marmeladze, Commented Feb 4, 2021 at 22:16

juliomalves · Accepted Answer · 2021-02-04 22:28:43Z

0

You could create a custom Link component, as a wrapper to next/link, that would check for the query string and add it to the href of the Next.js 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;

Then replace all imports of next/link with the path to the new component wherever they are used (a simple search & replace would do).

answered Feb 4, 2021 at 22:28

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JPM Over a year ago

There are some components (like the body of a blog post) that just have raw "dangerouslySetInnerHTML" content. How would you handle that?

juliomalves Over a year ago

Before setting it to dangerouslySetInnerHTML you could parse the raw HTML, look for links and modify their hrefs with the same logic as above. Can't think of a solution that doesn't involve parsing the HTML.

Collectives™ on Stack Overflow

Add query string to ALL links in application

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related