On a website, a navigation menu is a list of links to other web pages usually internal pages and elements. Navigation menus allow visitors to quickly access the most useful pages or sections of a page.

In this tutorial, we will learn about React-router-hash-link and how to use it in our ReactJS applications.

Prerequisites

1. Node 8.10 or higher installed on your local development machine

2. Create react application: Open our terminal and cd into the folder where we want the react app to be located and type the following command.

     npm create vite@latest
   

3. Project name: We name our react app react-hashlink.

   

4. Framework: We will be working with React so select React

   

5. Variant: Select Javascript

   

   Our react application will be in created a couple of seconds

   

6. Cd into react-hashlink folder and run the following command

     npm install
   

     npm run dev
   

   Now our react app is live and we can view it on our local host using the Local link in our terminal "localhost:5173"

   

React Dependency

Our react environment is ready, we open our application with vs code, and in the terminal install the following dependencies need for this project.

• react-router-hash-link is used to create links, it scrolls to an element on the page using the id attribute that matches the #hash-fragment in the link.

      npm install react-router-hash-link
  

• react-router-dom is a peer dependency that must be installed for react-router-hash-link to work.

      npm install react-router-dom
  

Components

In our src folder, we will create a folder called the components, where we will store all the components files needed for this project. Let's create the following files and add the below jsx template to each of the components.

• Home.jsx

• Skills.jsx

• About.jsx

• Contact.jsx

  Note: The "FileName" in the code below should replace the correct component name and the element “id” should also be different for each component.

      import React from "react";
      //
      export default function FileName() {
        return (
          <section id="filename" className="padding">
            <h2>About</h2>
            <p>
              {" "}
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem dolor
              assumenda esse harum fuga commodi quis iusto inventore. Modi, magnam
              repellendus? Neque explicabo, quaerat perspiciatis eius voluptas ea
              nostrum enim. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Rem dolor assumenda esse harum fuga commodi quis iusto inventore. Modi,
              magnam repellendus? Neque explicabo, quaerat perspiciatis eius voluptas
              ea nostrum enim.
            </p>
            <p>
              {" "}
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem dolor
              assumenda esse harum fuga commodi quis iusto inventore. Modi, magnam
              repellendus? Neque explicabo, quaerat perspiciatis eius voluptas ea
              nostrum enim. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Rem dolor assumenda esse harum fuga commodi quis iusto inventore. Modi,
              magnam repellendus? Neque explicabo, quaerat perspiciatis eius voluptas
              ea nostrum enim.
            </p>
            <p>
              {" "}
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem dolor
              assumenda esse harum fuga commodi quis iusto inventore. Modi, magnam
              repellendus? Neque explicabo, quaerat perspiciatis eius voluptas ea
              nostrum enim. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Rem dolor assumenda esse harum fuga commodi quis iusto inventore. Modi,
              magnam repellendus? Neque explicabo, quaerat perspiciatis eius voluptas
              ea nostrum enim.
            </p>
          </section>
        );
      }
  

React route to application

In the App.jsx file remove the imported useState, and the declared count state, clear the children element of the div with the class name "App" content then import the BrowserRouter from react-router-dom to wrap jsx template.

HashLink: This is a link that is used to scroll to an element on the page using the id attribute that matches the #hash-fragment in the link.

import { BrowserRouter } from "react-router-dom";
import { HashLink } from "react-router-hash-link";

import About from "./components/About";
import Contact from "./components/Contact";
import Home from "./components/Home";
import Skills from "./components/Skills";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <header>
          <h1>React Hashlink</h1>
          <nav>
            <ul>
              <li>
                <HashLink
                  scroll={(el) => el.scrollIntoView({ behavior: "auto" })}
                  to="#home"
                >
                  home
                </HashLink>
              </li>
              <li>
                <HashLink
                  scroll={(el) => el.scrollIntoView({ behavior: "auto" })}
                  to="#skills"
                >
                  skills
                </HashLink>
              </li>
              <li>
                <HashLink
                  scroll={(el) => el.scrollIntoView({ behavior: "auto" })}
                  to="#about"
                >
                  about
                </HashLink>
              </li>
              <li>
                <HashLink
                  scroll={(el) => el.scrollIntoView({ behavior: "auto" })}
                  to="#contact"
                >
                  contact
                </HashLink>
              </li>
            </ul>
          </nav>
        </header>

        <Home />
        <Skills />
        <About />
        <Contact />
      </div>
      ;
    </BrowserRouter>
  );
}

export default App;

Conclusion

Finally, we have successfully implemented navigation within a page by "id" in our React application using React Router HashLink. You can learn more about how react-router-hash-link works, access code snippets, and experiment by visiting their official documentation.

You can download the project from the source code link provided below, and run it on your system.

Code source: github.com/ibimina/react-hashlink

Live URL:ibimina-react-hashlink.netlify.app

If you have any questions, you can leave them in the comment section below.