Question 72734 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to connect a NavLink to another component on the same page (React)? – Reactjs

I have a one-page React website with 6 components. At the top of the page I have a Bootstrap NavBar, and I want to connect the nav links to their respective components. Basically I’d like them to function as anchor links would in HTML – to scroll down to the relevant component when clicked.

These are my nav links right now. I’ve done a lot of searching and have found a lot of different info/answers, so don’t really know where to start.

<Nav className="mx-auto Nav nav-links">
  <Nav.Link href="#">Clases</Nav.Link>
  <Nav.Link href="#">Estudio</Nav.Link>
  <Nav.Link href="#">Tu Instructora</Nav.Link>
  <Nav.Link href="#">Contacto</Nav.Link>
</Nav>
Tags:

2

Answers


  1. 0

    Use react-scroll library that you can use Link and Element for handling smooth scrolling easily 🙂

    Login or Signup to reply.
  2. 0

    It should be worked out of the box if you have nodes with corresponding ids.

    https://stackblitz.com/edit/react-ts-b1erif?file=App.tsx,index.tsx

    But for more useful features like smooth scrolling and positioning, you can use react-scroll.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search