How to navigate one page to another page into ReactJS

SPA (Single Page Application) is one of the main features of ReactJS. In a single page application, the browser engine opens up just one HTML document and changes the data on that vey document according to some conditions. Navigating from one page to another in a single page is an amazing feature of ReactJS.

In this article, we will be knowing how to navigate one page from another in ReactJS using React Router.

Below are the steps we will have to follow:

Install React Router
Setup the routing environment
Routing

Install React Router

Open up the React project and install React Router in it.

npm install react-router-dom@6

Setup the routing environment

Go to the src folder and open index.js then import BrowserRouter from react-router-dom

// import browserrouter from react router dom
import { BrowserRouter } from 'react-router-dom';

Wrap the <App /> component with <BrowserRouter>..</BrowserRouter>

<BrowserRouter>
  <App />
</BrowserRouter>

Create a Header component in the src folder.

import React from 'react';

const Header = () => {
    return (
        <div className="navbar bg-[#FA7D19] text-white  px-16">
            <div className="flex-1">
                <a href="#" className="btn btn-ghost normal-case text-3xl">CodeBun</a>
            </div>
            <div className="flex-none">
                <ul className="menu menu-horizontal p-0 font-bold">
                    <li><a>Home</a></li>
                    <li><a>About</a></li>
                    <li><a>Blogs</a></li>
                    <li><a>Contact Us</a></li>
                </ul>
            </div>
        </div>
    );
};

export default Header;

Create some more components (eg. Home, About, Blogs etc. )

This is the Home component,

import React from 'react';

const Home = () => {
    return (
        <div>
            <h1 className="text-5xl text-center">This is Homepage</h1>
        </div>
    );
};

export default Home;

This is the About component,

import React from 'react';

const About = () => {
    return (
        <div>
            <h1 className="text-5xl text-center">About Us</h1>
        </div>
    );
};

export default About;

And this is the Blogs component,

import React from 'react';

const Blogs = () => {
    return (
        <div>
            <h1 className="text-5xl text-center">Read Blogs</h1>
        </div>
    );
};

export default Blogs;

Routing

Go to App.js and import Routes and Route from react-router-dom

// import routes and route from react-router-dom
import { Route, Routes } from "react-router-dom";

Import the Header component and use it inside JSX

import Header from "./components/Header";

<div className="min-h-screen">
      <Header />
</div>

Declare Routes just like any other HTML tag

 return (
    <div className="min-h-screen">
      <Header />
      {/* declare routes */}
      <Routes>

      </Routes>
    </div>
  );

Inside <Routes>...</Routes> , declare the <Route /> ; the component which is being imported from React Router.

<Routes>
        {/* declaring route */}
        <Route />
        <Route />
        <Route />
</Routes>

<Route /> takes two things as attributes. path and element . path, indicates the path, in which path the component will be being rendered. And element indicates the component that will be being rendered in that path.

<Routes>
        {/* declaring route */}
        <Route path="/" element={<Home />} />
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/blogs" element={<Blogs />} />
</Routes>

Note: If we go to ‘/home’ this path, the Home component will be rendered. The same goes for the other components as well

Declare <Header /> component before the opening <Routes> tag. (Because we want the Header component to be shown on every other page.)

return (
    <div className="min-h-screen">
      <Header />
      {/* declare routes */
      <Routes>
        {/* declaring route */}
        <Route path="/" element={<Home />} />
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/blogs" element={<Blogs />} />
      </Routes>
    </div>
  );

Go to Header component and import Link from React Router

import { Link } from 'react-router-dom';

This is the Header component,

import React from 'react';
import { Link } from 'react-router-dom';
const Header = () => {
    return (
        <div className="navbar bg-[#FA7D19] text-white  px-16">
            <div className="flex-1">
                <a href="#" className="btn btn-ghost normal-case text-3xl">CodeBun</a>
            </div>
            <div className="flex-none">
                <ul className="menu menu-horizontal p-0 font-bold">
                    <li><a>Home</a></li>
                    <li><a>About</a></li>
                    <li><a>Blogs</a></li>
                    <li><a>Contact Us</a></li>
                </ul>
            </div>
        </div>
    );
};

export default Header;

Change the <a> tag with the <Link> tag here. And pass ” to=”” ” as an attribute for each <Link>. It will work like the href attribute of <a> tag.
Note: The path from <Route> in App.js component and the “to” attribute of <Link> from Header component needs to be the same.

import React from 'react';
import { Link } from 'react-router-dom';
const Header = () => {
    return (
        <div className="navbar bg-[#FA7D19] text-white  px-16">
            <div className="flex-1">
                <a href="#" className="btn btn-ghost normal-case text-3xl">CodeBun</a>
            </div>
            <div className="flex-none">
                <ul className="menu menu-horizontal p-0 font-bold">
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/blogs">Blogs</Link></li>
                    {/* we haven't created any component for the contact page but it will also be the same if there were a component */}
                    <li><Link to="/contact">Contact Us</Link></li>
                </ul>
            </div>
        </div>
    );
};

export default Header;

This is how we can navigate through the pages.

Note: We are using Tailwind CSS as a component library here. To know more, Read This Article.