Problem with hashlinks. When I want to go to specific sections of another pages, they take me to the top of that other page instead
11:34 10 Feb 2026

I'm new to front-end development. I wanted to start with a personal project and learn along the way.

I'm developing a basic website for a store. This is how the home page looks: Home page (below the "ON SALE" section there is a "Location" section and a footer where the contact info would be. There is also another page where I would show the products: Products page.

When I am on the home page I can navigate the sections within the page just fine using the navbar above. The problem arises when I'm on the products page and I want to go from there to an specific section in the home page (let's say, the Location section). The address bar shows the correct link (http://localhost:1234/#location), but it's not taking me to that section, instead it takes me to the top of the home page.

Now here are the parts of the code I believe are relevant:

function NavBar() {
  return(
    
  );
}

I'm using the element instead of the Link component that comes with the React-Router library, because when I did use that I couldn't even navigate within the same page.

Things I've already tried:

  • Using HashLink from the React-Router-Hash-Link package. It didn't work, it was throwing errors. I think it isn't compatible with the latest version of React-Router.

  • I've also tried installing this package @cascadia-code/scroll-to-hash-element that claimed to fix the issue, but I got errors when I tried installing it.

What I need:

A package that lets me navigate to sections of other pages and for it to not take me to the top when I want to go to an specific section.

javascript reactjs react-router navigation hashlink