From d93cd5448c2d8e22f3cf9415e5d1c03d83ebc8e6 Mon Sep 17 00:00:00 2001
From: Adam Brauer <400763+ambrauer@users.noreply.github.com>
Date: Mon, 7 Feb 2022 14:15:06 -0600
Subject: [PATCH 1/2] Handle `querystring` value in React Link

---
 packages/sitecore-jss-react/src/components/Link.test.tsx | 3 ++-
 packages/sitecore-jss-react/src/components/Link.tsx      | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/sitecore-jss-react/src/components/Link.test.tsx b/packages/sitecore-jss-react/src/components/Link.test.tsx
index c30bfc57d1..8eef32bb9b 100644
--- a/packages/sitecore-jss-react/src/components/Link.test.tsx
+++ b/packages/sitecore-jss-react/src/components/Link.test.tsx
@@ -68,10 +68,11 @@ describe('<Link />', () => {
         class: 'my-link',
         title: 'My Link',
         target: '_blank',
+        querystring: 'foo=bar',
       },
     };
     const rendered = mount(<Link field={field} />).find('a');
-    expect(rendered.html()).to.contain(`href="${field.value.href}"`);
+    expect(rendered.html()).to.contain(`href="${field.value.href}?${field.value.querystring}"`);
     expect(rendered.html()).to.contain(`class="${field.value.class}"`);
     expect(rendered.html()).to.contain(`title="${field.value.title}"`);
     expect(rendered.html()).to.contain(`target="${field.value.target}"`);
diff --git a/packages/sitecore-jss-react/src/components/Link.tsx b/packages/sitecore-jss-react/src/components/Link.tsx
index dfcdf91490..5412fb9b88 100644
--- a/packages/sitecore-jss-react/src/components/Link.tsx
+++ b/packages/sitecore-jss-react/src/components/Link.tsx
@@ -9,6 +9,7 @@ export interface LinkFieldValue {
   title?: string;
   target?: string;
   text?: string;
+  querystring?: string;
 }
 
 export interface LinkField {
@@ -94,7 +95,7 @@ export const Link: React.SFC<LinkProps> = ({
   }
 
   const anchorAttrs: { [attr: string]: unknown } = {
-    href: link.href,
+    href: link.querystring ? `${link.href}?${link.querystring}` : link.href,
     className: link.class,
     title: link.title,
     target: link.target,

From bc68c4620fb999ebb46bc3ecdafb0032324e3da5 Mon Sep 17 00:00:00 2001
From: Adam Brauer <400763+ambrauer@users.noreply.github.com>
Date: Mon, 7 Feb 2022 14:16:25 -0600
Subject: [PATCH 2/2] Handle `querystring` value in Next Link. Remove `field`
 prop from htmlLinkProps.

---
 .../src/components/Link.test.tsx              |  3 ++-
 .../src/components/Link.tsx                   | 19 ++++++++++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/sitecore-jss-nextjs/src/components/Link.test.tsx b/packages/sitecore-jss-nextjs/src/components/Link.test.tsx
index a44b753279..f36affbc9c 100644
--- a/packages/sitecore-jss-nextjs/src/components/Link.test.tsx
+++ b/packages/sitecore-jss-nextjs/src/components/Link.test.tsx
@@ -41,6 +41,7 @@ describe('<Link />', () => {
         class: 'my-link',
         title: 'My Link',
         target: '_blank',
+        querystring: 'foo=bar',
       },
     };
 
@@ -52,7 +53,7 @@ describe('<Link />', () => {
 
     const link = c.find('a');
 
-    expect(link.html()).to.contain(`href="${field.value.href}"`);
+    expect(link.html()).to.contain(`href="${field.value.href}?${field.value.querystring}"`);
     expect(link.html()).to.contain(`class="${field.value.class}"`);
     expect(link.html()).to.contain(`title="${field.value.title}"`);
     expect(link.html()).to.contain(`target="${field.value.target}"`);
diff --git a/packages/sitecore-jss-nextjs/src/components/Link.tsx b/packages/sitecore-jss-nextjs/src/components/Link.tsx
index 07f1de49dc..334acfa552 100644
--- a/packages/sitecore-jss-nextjs/src/components/Link.tsx
+++ b/packages/sitecore-jss-nextjs/src/components/Link.tsx
@@ -19,29 +19,30 @@ export type LinkProps = ReactLinkProps & {
 
 export const Link = (props: LinkProps): JSX.Element => {
   const {
+    field,
     editable,
+    children,
     internalLinkMatcher = /^\//g,
     showLinkTextWithChildrenPresent,
     ...htmlLinkProps
   } = props;
 
-  const value = ((props.field as LinkFieldValue).href
-    ? props.field
-    : (props.field as LinkField).value) as LinkFieldValue;
-  const { href } = value;
-  const isEditing = editable && (props.field as LinkFieldValue).editable;
+  const value = ((field as LinkFieldValue).href
+    ? field
+    : (field as LinkField).value) as LinkFieldValue;
+  const { href, querystring } = value;
+  const isEditing = editable && (field as LinkFieldValue).editable;
 
   if (href && !isEditing) {
-    const text =
-      showLinkTextWithChildrenPresent || !props.children ? value.text || value.href : null;
+    const text = showLinkTextWithChildrenPresent || !children ? value.text || value.href : null;
 
     // determine if a link is a route or not.
     if (internalLinkMatcher.test(href)) {
       return (
-        <NextLink href={href} key="link" locale={false}>
+        <NextLink href={{ pathname: href, query: querystring }} key="link" locale={false}>
           <a title={value.title} target={value.target} className={value.class} {...htmlLinkProps}>
             {text}
-            {props.children}
+            {children}
           </a>
         </NextLink>
       );