Matu
Matu

Reputation: 33

Next.js: Link to element in a component on the same page

I am working on my first Next.js project and I have a one-page website. I already have done the navigation component, but now I need to manage links.

How to add <Link /> component that will refer to elements (in my case <section>) in other components (I mean something like in pure HTML with element id:

<a href="#about">About us</a>)?

Is it possible to change the URL slug when the scroll position is on the specific element (e.g. when the user scrolls to the About us section the slug will be domain.com/about and when the user will scroll down on the same page to Contact section the URL slug will be domain.com/contact)?

Upvotes: 1

Views: 5262

Answers (1)

Taghi Khavari
Taghi Khavari

Reputation: 6582

You can achieve that behavior using what you said above and it will work.

something like this codesandbox: https://codesandbox.io/s/jolly-babycat-4zoqv?file=/pages/index.js

 <div>
      These are the links
      <Link href="#about">
        <a>About</a>
      </Link>
      <Link href="#contact">
        <a>contact</a>
      </Link>
      <div
        style={{
          width: "100%",
          height: "2000px",
          marginTop: 800,
          background: "#ff0"
        }}
      >
        <section ref={aboutRef} id="about" style={{ ...sectionStyle }}>
          About
        </section>
        <section
          ref={contactRef}
          style={{ ...sectionStyle, background: "red" }}
          id="contact"
        >
          Contact
        </section>
      </div>
    </div>

Upvotes: 2

Related Questions