Anchor Tag in Next.js

user_2860931 0
Viewed 11806

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?

next.js html
5 Answers

As said by @juliomalves in the comments, you have to specify the id attribute in the element in which you have 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="#secion">Click</a>

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

Your code should go 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>
user_160345670

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

user_148761350

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.

user_37651760

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.

user_170749610
user_103702620
Related