How to navigate a webpage using an element "id" attribute in a react a

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

Node 8.10 or higher installed on your local development machine
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
```
Project name: We name our react app react-hashlink.
Framework: We will be working with React so select React
Variant: Select Javascript

Our react application will be in created a couple of seconds
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.

How to navigate a React application using an element ID Attribute

Table of contents

Prerequisites

React Dependency

Components

React route to application

Conclusion