How does React Router handle navigation in a React application?
Last Updated :
28 Apr, 2025
React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL. Let us create a simple application to React to understand how the React Router works
React Router simplifies navigation in React applications by providing a declarative approach to define routes and their corresponding components using JSX syntax. It supports nested routing, route parameters, and programmatic navigation, that allows for dynamic and hierarchical navigation structures.
Approach to Handle navigation Using Link
Link is a component provided by React Router DOM that creates a hyperlink to navigate to a different route in your application. It's typically used as a replacement for the <a> tag to navigate between different views in a React application without a page reload. When you click on a Link component, React Router DOM handles the navigation without a full page refresh.
Steps to create React App with React Router
Step 1: Create the react Application using the following command.
npx create-react-app navigation
Step 2: Now move into the project's directory
cd navigation
Step 3: Installing React Router using the following command.
npm install react-router-dom
Folder Structure:

The updated dependencies in package.json file will look like:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.3",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: Create the following folders s seen in folder structure and add the following codes.
JavaScript
// App.js
import {
BrowserRouter as Router,
Routes,
Route,
} from "react-router-dom";
import Home from './Components/Home';
import Contact from './Components/Contact';
import About from './Components/About';
import Welcome from './Components/Welcome';
import Blog from './Components/Blog';
function App() {
return (
<>
<Router>
<Welcome />
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
<Route path="contact" element={<Contact />} />
<Route path="blog" element={<Blog />} />
</Routes>
</Router>
</>
);
}
export default App;
JavaScript
// Home.js
import React from 'react'
const Home = () => {
return (
<div style={{ color: "#00FFBF" }}>In <b>Home</b> page...</div>
)
}
export default Home
JavaScript
// Contact.js
import React from 'react'
const Contact = () => {
return (
<div style={{ color: "#62b6cb" }}> In <b>Contact</b> page...</div>
)
}
export default Contact
JavaScript
// Blog.js
import React from 'react'
const Blog = () => {
return (
<div style={{ color: "#a594f9" }}>In <b>Blog</b> page...</div>
)
}
export default Blog
JavaScript
// About.js
import React from 'react'
const About = () => {
return (
<div style={{ color: "#f72585" }}>In <b>About</b> page...</div>
)
}
export default About
JavaScript
// Welcome.js
import React from 'react'
import { Link } from 'react-router-dom'
const Welcome = () => {
return (
<>
<h3>Welcome to GFG</h3>
<h5> React app: Navigation using Link</h5>
<ul>
<li><Link to='/'>Home</Link></li>
<li><Link to='about'>About</Link></li>
<li><Link to='contact'>Contact</Link></li>
<li><Link to='blog'>Blog</Link></li>
</ul>
</>
)
}
export default Welcome
Output:

Similar Reads
Mastering React Routing: Learn Navigation and Routing in React Apps 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 conce
6 min read
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:NPM & Node.jsReact JSReact-Router-DomApproachNaviga
3 min read
Navigate Component in React Router In React applications, navigation between different pages or views is an essential part of creating dynamic user interfaces. React Router is a popular library used for handling routing and navigation. One of the key features of React Router is the Navigate component, which allows for programmatic re
7 min read
How to Set Up Vite for a Multi-Page Application? Vite is a frontend development tool, used to build projects and multiple page applications in React.js. It is a beginner-friendly user tool that was developed by the founder of Vue.js, another framework of React.js. we will learn how to set up Vite for a Multi-Page Application. Steps to Set Up Vite
5 min read
How to Use Routing with React Navigation in React Native ? Almost every mobile application requires navigating between different screens. React Native provides an elegant and easy-to-use library to add navigation to native applications: react-navigation. It is one of the most popular libraries used for routing and navigating in a React Native application.Tr
4 min read
Link and NavLink components in React-Router-Dom When creating a React app, handling navigation properly is important. React Router provides two key components, Link and NavLink, to make moving between pages easy. These components work like regular <a> tags but prevent full-page reloads, making the app faster and smoother for users.What is a
4 min read
How to handle Nested Routes in React Router ? React Router allows us to create a hierarchical structure where child components can be rendered within parent components, resulting in a seamless navigation flow. In this article, we will see how to handle nested Routes in React Router. Approach to handle Nested RoutesTo implement nested routes in
3 min read
How to add navigation links to the React Bootstrap Navbar? In ReactJS, we use Nabvar or Navigation Bar as the core component. For ease of navigation over the application, we use this NavBar in react-bootstrap. We need to add navigation links to go through different routes or pages of the application. So to add the navigation links to the React Bootstrap Nav
5 min read
Difference between Link and Navigate Component in React Router In this article, we'll delve into the intricacies of two fundamental components within the widely acclaimed React Router Dom Library a Link and Navigate. As the backbone of many react applications, these components play pivotal roles in facilitating seamless navigation and routing. We'll explore the
4 min read
How to create Breadcrumb Navigation Using React ? Breadcrumbs are useful in navigation and provide users with links representing their path through a website or application. In this tutorial, we'll create a simple e-commerce website with product listings and detail pages, incorporating breadcrumbs for a better user experience.Output Preview: Let us
6 min read