Nav.jsx

            <HashLink smooth to="/#section1">
              <button>section1</button>
            </HashLink>
            <HashLink smooth to="/#section2">
              <button>section2rekber</button>
            </HashLink>
            <HashLink smooth to="/#section3">
              <button>section3</button>
            </HashLink>
            <HashLink smooth to="/#section4">
              <button>section4</button>
            </HashLink>
            <HashLink smooth to="/#section5">
              <button>section5</button>
            </HashLink>

App.jsx

    <main>
      <Nav/>
      <Routes>
        <Route exact path="/" element={<Home />} />
      </Routes>
    </main>

Home.jsx

<section id="section1">
this is section1 ... .
</section>
<section id="section2">
this is section2 ... .
</section>
<section id="section3">
this is section3 ... .
</section>
<section id="section4>
this is section4 ... .
</section>
<section id="section5">
this is section5 ... .
</section>

Problem : when clicking the link for the first time didnt scroll down automatically and need to reload the page first to navigate to spesific id.

expected : when click the link automatically scroll to spesific id section like this .

just trying to reload the page manually using useEffect but apparenly not working for me.

Edit : It turned out that the bug only appears on Chrome, but it works fine on Firefox.

Nav.jsx

            <HashLink smooth to="/#section1">
              <button>section1</button>
            </HashLink>
            <HashLink smooth to="/#section2">
              <button>section2rekber</button>
            </HashLink>
            <HashLink smooth to="/#section3">
              <button>section3</button>
            </HashLink>
            <HashLink smooth to="/#section4">
              <button>section4</button>
            </HashLink>
            <HashLink smooth to="/#section5">
              <button>section5</button>
            </HashLink>

App.jsx

    <main>
      <Nav/>
      <Routes>
        <Route exact path="/" element={<Home />} />
      </Routes>
    </main>

Home.jsx

<section id="section1">
this is section1 ... .
</section>
<section id="section2">
this is section2 ... .
</section>
<section id="section3">
this is section3 ... .
</section>
<section id="section4>
this is section4 ... .
</section>
<section id="section5">
this is section5 ... .
</section>

Problem : when clicking the link for the first time didnt scroll down automatically and need to reload the page first to navigate to spesific id.

expected : when click the link automatically scroll to spesific id section like this https://v5.reactrouter/web/api/Hooks/uselocation.

just trying to reload the page manually using useEffect but apparenly not working for me.

Edit : It turned out that the bug only appears on Chrome, but it works fine on Firefox.

• javascript
• reactjs
• anchor

• 2 If you are using React-Router v5 then you can use React-Router-Hash-Link to navigate to hash ids. If you need more help than this then please edit to include a complete minimal reproducible example. – Drew Reese Commented Mar 18 at 15:58

1 Answer 1

May be using useEffect & useLocation hook will solve that issue, it will check if there is a location.hash on page load. If there is, it will scroll to the corresponding section.