CODEWITHSUNDEEP
htmlnext.js
Mel
Mel

Reputation: 2685

Anchor Tag in Next.js

I'm tryin got use an anchor tag in Next.js

I don't get any console errors when I set it up and click the link, but the page does not jump to the id tag.

This issue on github suggests that people need to figure out a lot of custom code to use anchors. That can't be right.

I have:

const links = [
    { label: 'Solutions', href: '#solutions', id: 'solutions' },
    
  ]

 <NavLink.Desktop key={index} href={link.href} id={link.id}>
            {link.label}
          </NavLink.Desktop>

I get no errors, but the page does not jump to the label that has an id of 'solutions'.

Does anyone know how to solve this, or where to go for ideas on how - it can't be intented that complex custom code is required to use an anchor tag?

Upvotes: 10

Views: 42240

Answers (5)

Dhilip H
Dhilip H

Reputation: 652

As said by @juliomalves in the comments, you have to specify the id attribute on the element in which you wish to navigate to. Not on the anchor tag.

The id for the anchor should be set on the element you want to link to, not on the link itself.

The below code works for me in Next.js -

export default function Home() {
  return (
    <div>
      <a href="#section">Click</a>

      <section
        style={{ marginTop: "1000px", marginBottom: "1000px" }}
        id="section"
      >
        <h1>Test</h1>
      </section>
    </div>
  );
}

Your code should look like this -

const links = [{ label: 'Solutions', href: '#solutions', id: 'solutions' }]

<NavLink.Desktop 
     key={index} 
     href={link.href}
     // id={link.id} - This is wrong, as you're referring to the same element
>
   {link.label}
</NavLink.Desktop>

// Rather set the id attribute in a separate div/section element
<div id={link.id}>
   <h2>Solutions</h2>
</div>

Upvotes: 3

QribCode
QribCode

Reputation: 81

Chakra UI has a Link component

<Link href='https://chakra-ui.com' isExternal>
Chakra Design system <ExternalLinkIcon mx='2px' />
</Link>

If you use the regular anchor tags

<Link href="#anchor_one">Menu one</Link>
<Link href="#anchor_two">Menu two</Link>

Then you can add the id for the anchors to the sections you want to navigate into

<div id="anchor_one" />
<div id="anchor_two" />

This can be either pages or components.

I hope this helped a little bit.

Upvotes: 8

Danilo Zekovic
Danilo Zekovic

Reputation: 81

It is possible to scroll to anchor programatically using Router.push:

import { useRouter } from 'next/router'

const Foo = () => {
  const { push } = useRouter()

  const handleClick = () => {
    push("#blah")
  }

  return (
    <div>
      <button onClick={handleClick}>Scroll</button>
      <div>Foo</div>
      <div>Bar</div>
      <div id="blah">Blah</div>
    </div>
  )
}

Next.js recognises that you are passing something that is not a link to a new page and will concat it (in the example #blah) to the end of the URL.

Upvotes: 2

Neezar
Neezar

Reputation: 56

maybe try

const links = [
{ label: 'Solutions', href: '#solutions', id: 'solutions' },

 ]

<NavLink.Desktop key={index} href={links[0].href} id={links[0].id}>
        {link.label}
</NavLink.Desktop>

since you only have 1 element in the links array, if you have multiple just map through the array

Upvotes: 0

Angad
Angad

Reputation: 561

Have a read about Link from next/link its a built in feature.

https://nextjs.org/docs/api-reference/next/link

https://github.com/vercel/next.js/blob/canary/examples/hello-world/pages/index.js#L7

Upvotes: -1

Related Questions