How to navigate on path by button click in react router ?

Navigation in React JS is done by implementing the routing between components using react-router-dom.

Prerequisites:

• NPM & Node.js
• React JS
• React-Router-Dom

Approach:

In React, to navigate on the path by clicking a button we will be using the useHistory hook from react-router-dom^5 (useNavigate in v6). We will set the routes for specific components and navigate between them using a button.

Steps to Create React Application and Install Modules:

Step 1: Make a project directory, head over to the terminal, and create a react app named “ cs portal ”  using the following command.

npx create-react-app cs-portal 

Step 2: Move to the project directory.

cd cs-portal

Project Structure:

Final Project  structure 

The updated dependencies in package.json file.

"dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "bootstrap": "^4.6.2",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-router-dom": "^5.3.4",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
}

Example: This example demonstrates the Navigation between components in React Router when the button is clicked.

Javascript

// Filename - App.js

import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
} from "react-router-dom";
import Homepage from "./Components/Homepage";
import Courses from "./Components/Courses";
import "bootstrap/dist/css/bootstrap.min.css";

import "./App.css";
import Navbar from "./Components/Navbar";

function App() {
    return (
        <>
            <Navbar />
            <Router>
                <Switch>
                    <Route
                        exact
                        path="/"
                        component={Homepage}
                    />

                    <Route
                        exact
                        path="/courses"
                        component={Courses}
                    />
                </Switch>
            </Router>
        </>
    );
}

export default App;

Javascript

// Filename - Components/Navbar

import React from "react";

function Navbar() {
    return (
        <div>
            <nav className="navbar navbar-light bg-light">
                <img
                    src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220125183244/g.png"
                    width="300"
                    height="75"
                    className="d-inline-block align-top logo"
                    alt="GfG.png"
                />
                GeeksforGeeks
            </nav>
        </div>
    );
}

export default Navbar;

Javascript

// Filename - Components/Homepage.js

import React from 'react'
import { useHistory } from "react-router-dom";
import "../App.css";

function Homepage() {
    const history = useHistory();

    const coursesPage = () => {
        history.push("/courses")
    }
    return (
        <>

            <div className="jumbotron text-center">
                <h1 className="display-4">Hello,Geeks</h1>
                <p className="lead">
                    Geeks for Geeks is a Computer Science portal.
                    It contains well written, well thought and well
                    explained computer science and programming articles
                </p>

                <hr className="my-4" />
                <p>
                    Real-time Live and self paced courses carefully
                    curated for you !
                </p>

                <p className="lead">
                    <button className="btn btn-success"
                        onClick={coursesPage}>Explore Courses
                    </button>
                </p>

            </div>
        </>
    )
}

export default Homepage

Javascript

// Filename - Components/Courses

import React from "react";
import "../App.css";
import { useHistory } from "react-router-dom";

function Courses() {
    const history = useHistory();
    const home = () => {
        history.push("/");
    };
    return (
        <>
            <div className="card ">
                <h1>Courses </h1>
                <ul className="list-group list-group-flush">
                    <li className="list-group-item">
                        Data Structures & Algorithms
                    </li>
                    <li className="list-group-item">
                        Competitive Programming
                    </li>
                    <li className="list-group-item">
                        Full Stack Development
                    </li>
                    <li className="list-group-item">
                        Java Backend
                    </li>
                </ul>
            </div>
            <button
                className="btn btn-success"
                onClick={home}
            >
                Back to Home
            </button>
        </>
    );
}

export default Courses;

CSS

/* Filename: App.css */

* {
    text-align: center;
}

.logo {
    margin: auto;
}

.jumbotron {
    margin: 100px auto;
    max-width: 50%;
    text-align: center;
}

.card {
    width: 18rem;
    margin: 100px auto;
}

Step to run the application: Now let us run our application by using the following command. 

npm start

Output: By default, the React project will run on port 3000. You can access it at localhost:3000 on your browser. 

Working code output 

You can watch the GeeksforGeeks video to learn more about React JS routing.