nextjs taking me to a new page with links-CodePudding

Right now I'm trying to make it so that when I click on the text on the navbar it'll scroll down to the section in nextjs. I have the following code:

 <Link href="#About">About</Link>
 <Link href="#Sponsors">Sponsors</Link>
 <Link href="#FAQ">FAQ</Link>

This is the navbar, when I click about sponsors for example i want to go down to the page to sponsors

Where about, sponsors, and faq are sections on the page as you can see here:

So this is working but it OPENS A NEW TAB which I don't want. I want it to scroll down to where sponsors is.

Some information: Sponsor About and FAQ are their own components that I want to scroll to

CodePudding user response：

Use anchor tags instead of the Link component. The Link component is used for navigation between different pages in Next, but in your case you want to stay on the same page and just scroll to a different section.

<a href="#About">About</a>
<a href="#Sponsors">Sponsors</a>
<a href="#FAQ">FAQ</a>

Make sure that the id attribute of the element you want to scroll to matches the value of the href attribute in the anchor tag. For example, if you want to scroll to the Sponsors section, the element that represents that section should have an id attribute with a value of Sponsors. Here's an example of what that might look like:

<div id="Sponsors">
  ...
</div>

When you click on the Sponsors link, the page will scroll down to the div element with the id attribute of Sponsors.

CodePudding user response：

you need to have all your Sponsors, About, FAQ components in for example "home.jsx" and they must have the id of "Sponsors", "About", "FAQ" now you can use

<a href="#Sponsors"/>
<a href="#About"/>
<a href="#FAQ"/>

to make the page to scroll to the section you want. but if you want to render each component in different url you cannot use this method and you must use nextjs <Link> to go to the other page like

http://localhost:3000/Sponsors
http://localhost:3000/Sponsors
http://localhost:3000/Sponsors