Mastering React Routing: Learn Navigation and Routing in React Apps (original) (raw)

Last Updated : 21 Mar, 2025

**React Routing is a **technique used to **handle navigation within a React application. It enables users to move between **different views, **pages, or components without refreshing the **entire page, which is a key feature of **Single Page Applications (SPAs).

In this article, we will explore the essential **concepts of routing in **React applications. **React Router provides a powerful and **flexible way to **handle navigation between pages in Single Page Applications (SPAs).

What is Navigation in React?

Navigation refers to the process of moving between different views or sections within a React application. In React, most applications are developed as Single Page Applications (SPA), where the entire application is loaded initially, and subsequent navigation doesn't require reloading pages from the server. Instead, routing is handled on the client side, enabling smooth transitions between different components or views without full page reloads.

To implement routing in React we do not have in-built modules but instead, we use the react-router-dom module after installing and importing it.

**Syntax

// Installing npm i react-router-dom // Importing import { BrowserRouter } from 'react-router-dom';

Programmatically Navigate in React

Programmatic navigation allows you to navigate between different routes based on actions, such as button clicks or form submissions. This method provides more control over routing, enabling navigation in response to events triggered by the user.

**Approach

// App.js

import { BrowserRouter, Routes, Route } from "react-router-dom"; import "./App.css"; import AboutUs from "./components/AboutUs"; import ContactUs from "./components/CotactUs";

function App() { return (

<Route exact path="/" element={} /> <Route exact path="/contactus" element={} />
); }

export default App;

JavaScript

// AboutUs.js

import React from "react"; import { useNavigate } from "react-router-dom";

function AboutUs() { const nav = useNavigate(); return (

GeeksforGeeks is a computer science portal for geeks!

Read more about us at : https://www.geeksforgeeks.org/about/



<button onClick={() => { nav("contactus"); }} > Click Here to check contact details
); } export default AboutUs;

JavaScript

// ContactUs.js

import React from "react"; import { useNavigate } from "react-router-dom";

function ContactUs() { const nav = useNavigate(); return (

You can find us here:
GeeksforGeeks
5th & 6th Floor, Royal Kapsons, A- 118,
Sector- 136, Noida, Uttar Pradesh (201305)




<button onClick={() => { nav(-1); }} > Click Here to Go Back
); }

export default ContactUs;

`

**Output

gfg

**In this example

**Dynamic Routing with React router

Adding Link routes gets very lengthy when there are multiple pages, so we use the concept of Dynamic Routing to reduce the lines of code and make the code shorter. Dynamic routing allows you to define routes dynamically based on certain conditions.

**Approach

// App.js

import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; import CourseDetails from "./components/CourseDetails";

function App() { const courses = ["JavaScript", "React", "HTML", "DSA"]; return (

Dynamic Routing with React

<Route path="courses/:courseId" element={} /> ); }

export default App;

`` JavaScript `

// components/CourseDetails.js

import { useParams } from "react-router-dom";

function CourseDetails() { const { courseId } = useParams(); return (

This is {courseId} course

); }

export default CourseDetails;

`

**Output

gfg

**In this code

Handling 404 Errors (Page Not Found)

Sometimes user types a URL which does not exist in the website and the router fails and shows an error. To solve this problem we create a universal Route component which redirects to Link not found page whenever incorrect URL is passed.

Approach

// App.js

import logo from "./logo.svg"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import "./App.css"; import NavBar from "./components/Navbar"; import Home from "./components/Home"; import AboutUs from "./components/AboutUs"; import ContactUs from "./components/CotactUs"; import NoPageFound from "./components/NoPageFound";

function App() { return (

<Route exact path="/" element={} /> <Route exact path="/about" element={} /> <Route exact path="/contact" element={} /> <Route path="*" element={} />
); }

export default App;

JavaScript

// AboutUs.js import React from "react";

function AboutUs() { return (

GeeksforGeeks is a computer science portal for geeks!

Read more about us at : https://www.geeksforgeeks.org/about/
); } export default AboutUs;

JavaScript

// ContactUs.js import React from "react";

function ContactUs() { return (

You can find us here:
GeeksforGeeks
5th & 6th Floor, Royal Kapsons, A- 118,
Sector- 136, Noida, Uttar Pradesh (201305)
); }

export default ContactUs;

JavaScript

// Home.js import React from "react";

function Home() { return

Welcome to the world of Geeks!

; }

export default Home;

JavaScript

// Navbar.js

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

export default function NavBar() { return (

); }

JavaScript

// NoPageFound.js

export default function NoPageFound() { return

Error 404: Page Not Found

; }

`

**Output

**In this code

Conclusion

Learning navigation and routing in React is essential for building smooth, interactive web applications. React Router makes it easy to manage navigation between different pages or views without reloading the page, helping you create seamless single-page applications. By understanding how to set up basic routes, work with dynamic paths, navigate programmatically, and use nested routes, you can build more efficient and user-friendly React apps that offer a smooth browsing experience for users.