Next.js Discord

Discord Forum

Cant Link to route then ID.

Answered
Blanc de Hotot posted this in #help-forum
Open in Discord
Blanc de HototOP
This is the code I'm using trying to link to first / route, then #getTheApp element ID section on that route.

    <Link href="/#getTheApp">
      <button className="btn-std-small-black whitespace-nowrap flex items-center gap-x-2">
        <span>Ladda ner app</span>
        <BiDownload className="lg:w-6 w-5 lg:h-6 h-5" />
      </button>
    </Link>


And I get this error.

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <a> in <a>.

Any ideas? Even though I get the error, it's still working to use the Link.
Answered by Blanc de Hotot
I found the error now. I was using the code on two places (large and small devices) and one of them has another <a> tag before it by mistake. lol. My bad.
View full answer

15 Replies

riský
you want the server to get the # params, as the server can't get the has params...
ahh you meant error
try using just normal a tag (not next link)
but with your code, it is hard to tell where the error is...
@riský but with your code, it is hard to tell where the error is...
Blanc de HototOP
Same thing with a tag.

What do you mean by hard to tell where the error is? It's the code above that gives me the error. If I use a Link to just #element, it's working. It's when going to /route first, then #element that this error comes.
riský
ahh i didn't know if you had more code and the error was from that instead (it hapens a decent amount)
Blanc de HototOP
I see. Yeah the above code is what generates the error.
<Link href="#element"> is working.
riský
hmm so going to the homepage with a hash params is errorfull
Blanc de HototOP
href="/#element" gives the error.
But, it's working if I ignore the error.
riský
i feel like you should open a bug report as i don't see how it could be an intentional thing: https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#scrolling-to-an-id
Blanc de HototOP
I found the error now. I was using the code on two places (large and small devices) and one of them has another <a> tag before it by mistake. lol. My bad.
Answer
riský
yeah thats nice, and kinda why i asked for more code to see
Blanc de HototOP
I see. Sorry 🙂