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. To set navigation for components or events like button click, we can use the useHistory Hook provided in the react-router-dom v5.
Prerequisites:
Approach
Navigation in single-page applications is crucial for user experience. To navigate on the path by clicking a button we use the useHistory hook from react-router-dom v5 (i.e. useNavigate in v6). We will set the routes for specific components and navigate between them using a button.
Note: In react-router-dom v6 useHistory is replaced by useNavigate hook.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-portalProject 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 uses useHistory hook to navigate when the button is clicked.
/* 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;
}
// 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;
// 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;
// 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
// 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;
Step to run the application: Now let us run our application by using the following command.
npm startOutput: By default, the React project will run on port 3000. You can access it at localhost:3000 on your browser.
You can watch the GeeksforGeeks video to learn more about React JS routing.
Conclusion
To navigate on path using components and events we can define the routes first and implement the navigation using useHistory and useNavigate depending on the verson or react router used.
