Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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

Prerequisites:

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=
                    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. 

 



Last Updated : 24 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads