[Next.js][React] Link component does not add anchor to the internal l…

…inks (#1226) * feat: add pass anchor field from sitecore to hash prop on nextlink * chore: reference value in assertion * chore: add anchor to LinkFieldValue interface * Add anchor for sitecore-jss-react * refactoring Co-authored-by: Chris Manganaro <[email protected]>
Sitecore · Nov 2, 2022 · 3dcf5a1 · 3dcf5a1
1 parent ece5908
commit 3dcf5a1
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/packages/sitecore-jss-nextjs/src/components/Link.test.tsx b/packages/sitecore-jss-nextjs/src/components/Link.test.tsx
@@ -42,6 +42,7 @@ describe('<Link />', () => {
         title: 'My Link',
         target: '_blank',
         querystring: 'foo=bar',
+        anchor: 'foo',
       },
     };
 
@@ -53,7 +54,9 @@ describe('<Link />', () => {
 
     const link = c.find('a');
 
-    expect(link.html()).to.contain(`href="${field.value.href}?${field.value.querystring}"`);
+    expect(link.html()).to.contain(
+      `href="${field.value.href}?${field.value.querystring}#${field.value.anchor}"`
+    );
     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
@@ -31,7 +31,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
     const value = ((field as LinkFieldValue).href
       ? field
       : (field as LinkField).value) as LinkFieldValue;
-    const { href, querystring } = value;
+    const { href, querystring, anchor } = value;
     const isEditing = editable && (field as LinkFieldValue).editable;
 
     if (href && !isEditing) {
@@ -40,7 +40,11 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
       // determine if a link is a route or not.
       if (internalLinkMatcher.test(href)) {
         return (
-          <NextLink href={{ pathname: href, query: querystring }} key="link" locale={false}>
+          <NextLink
+            href={{ pathname: href, query: querystring, hash: anchor }}
+            key="link"
+            locale={false}
+          >
             <a
               title={value.title}
               target={value.target}

diff --git a/packages/sitecore-jss-react/src/components/Link.test.tsx b/packages/sitecore-jss-react/src/components/Link.test.tsx
@@ -64,6 +64,7 @@ describe('<Link />', () => {
     const field = {
       value: {
         href: '/lorem',
+        anchor: 'foo',
         text: 'ipsum',
         class: 'my-link',
         title: 'My Link',
@@ -72,7 +73,9 @@ describe('<Link />', () => {
       },
     };
     const rendered = mount(<Link field={field} />).find('a');
-    expect(rendered.html()).to.contain(`href="${field.value.href}?${field.value.querystring}"`);
+    expect(rendered.html()).to.contain(
+      `href="${field.value.href}?${field.value.querystring}#${field.value.anchor}"`
+    );
     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
@@ -10,6 +10,7 @@ export interface LinkFieldValue {
   title?: string;
   target?: string;
   text?: string;
+  anchor?: string;
   querystring?: string;
 }
 
@@ -94,8 +95,11 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
       return null;
     }
 
+    const anchor = link.anchor ? `#${link.anchor}` : '';
+    const querystring = link.querystring ? `?${link.querystring}` : '';
+
     const anchorAttrs: { [attr: string]: unknown } = {
-      href: link.querystring ? `${link.href}?${link.querystring}` : link.href,
+      href: `${link.href}${querystring}${anchor}`,
       className: link.class,
       title: link.title,
       target: link.target,