So I'm trying to create a navigation for my single page app that will smooth scroll down to the section of the page.

I want to have my navigation at the top of the page with links that when a user clicks, will smooth scroll them down to the section of the page. I'd also like it so if the user goes directly to the link website/about for example, it will smooth scroll to the section the same way as if you clicked about on the navigation component.

I understand how the react-router-dom works for routing pages, but I'm confused on how to make it work for this particular purpose.

Could this be achieved with HashRouter?

Here's the code I currently have:

function Header() {
  return (
    <>
      <Link to="/">Hero</Link>
      <Link to="/">About</Link>
      <Link to="/">Contact</Link>
    </>
  );
}

function Hero() {
  return (
    <section>
      <h1>Hero Section</h1>
    </section>
  );
}

function About() {
  return (
    <section>
      <h1>About Section</h1>
    </section>
  );
}

function Contact() {
  return (
    <section>
      <h1>Contact Section</h1>
    </section>
  );
}

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <Hero />
        <About />
        <Contact />
      </BrowserRouter>
    </div>
  );
}

I'm also providing a CodeSandBox, forks are appretiated! :)

So I'm trying to create a navigation for my single page app that will smooth scroll down to the section of the page.

I want to have my navigation at the top of the page with links that when a user clicks, will smooth scroll them down to the section of the page. I'd also like it so if the user goes directly to the link website.com/about for example, it will smooth scroll to the section the same way as if you clicked about on the navigation component.

I understand how the react-router-dom works for routing pages, but I'm confused on how to make it work for this particular purpose.

Could this be achieved with HashRouter?

Here's the code I currently have:

function Header() {
  return (
    <>
      <Link to="/">Hero</Link>
      <Link to="/">About</Link>
      <Link to="/">Contact</Link>
    </>
  );
}

function Hero() {
  return (
    <section>
      <h1>Hero Section</h1>
    </section>
  );
}

function About() {
  return (
    <section>
      <h1>About Section</h1>
    </section>
  );
}

function Contact() {
  return (
    <section>
      <h1>Contact Section</h1>
    </section>
  );
}

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <Hero />
        <About />
        <Contact />
      </BrowserRouter>
    </div>
  );
}

I'm also providing a CodeSandBox, forks are appretiated! :)

• javascript
• reactjs
• react-router

• There's a component called react-scroll. I haven't tried it, but it looks like what you are seeking: npmjs.com/package/react-scroll – terrymorse Commented Apr 13, 2020 at 20:55
• 1 Have you considered using regular anchor tags (<a href="#about">About</a> ) and setting page's css scroll-behavior: smooth? – brietsparks Commented Apr 13, 2020 at 21:04
• @Jordan there's a <ScrollView> in react - why not use that? – Rachel Gallen Commented Apr 13, 2020 at 21:23
• @terrymorse I'd prefer not to use external packages. – Jordan Commented Apr 13, 2020 at 21:48
• 1 @RachelGallen I'm pretty sure ScrollView is a React Native thing, no? – Jordan Commented Apr 13, 2020 at 21:51

3 Answers 3

What you could do is use an anchor tag instead of Link from react-router-dom and have an id on the sections. when the anchor tag is clicked scroll to the corresponding section

 <a
  href="/"
  onClick={e => {
  let hero = document.getElementById("hero");
  e.preventDefault();  // Stop Page Reloading
  hero && hero.scrollIntoView();
  }}
  >
  Hero
  </a>

  // Rest of Code 

  function Hero() {
   return (
    <section id="hero">
      <h1>Hero Section</h1>
    </section>
   );
  }

and to scroll to a section using a url path you would have to get the extract the path from url and scroll to the section that has that specific path as an id

  useEffect(() => {
    let url = window.location.href.split("/");
    let target = url[url.length - 1].toLowerCase();
    let element = document.getElementById(target);
    element && element.scrollIntoView({ behavior: "smooth", block: "start"});
  }, []);

CodeSandbox here

Hope This Helps

To allow the link to update in the address bar, use the answer from @Abdullah Abid but change the <a> tags to <link> and the href to to.

See my ammendment to Abdullah's Sandbox Here

Just add following property to your index.css :

scroll-behavior: smooth;