How to implement client-side routing in React?
Last Updated :
01 Aug, 2024
Client-side routing is a fundamental concept in modern single-page applications (SPAs) that allows for navigation within the application without a full page reload. In React, libraries like React Router provide the tools necessary to implement client-side routing seamlessly.
In this article, we will explore the process of implementing client-side routing in a React application, covering various aspects and best practices.
Prerequisites
Using React Router
React Router is a standard library for routing in React. It allows you to handle routes declaratively. It enables dynamic routing, which means that your application can modify its routes based on the application's state or user interactions. It supports everything from basic routing to nested routes, route parameters, and authenticated routes.
Steps to Implement React Router
Step 1: Create a react app by using the following command.
npx create-react-app routing
cd routing
Step 2: Install the required dependencies.
npm install react-router-dom
Project Structure:
Folder StructureThe 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.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: Create the required files and add the following code.
JavaScript
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
JavaScript
//App.js
import React from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
function App() {
return (
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About Us</Link>
</li>
<li>
<Link to="/contact">Contact Us</Link>
</li>
</ul>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
);
}
export default App;
JavaScript
//About.jsx
import React from 'react';
function About() {
return (
<div>
<h1>About Us</h1>
<p>Learn more about our company and mission.</p>
</div>
);
}
export default About;
JavaScript
//Home.jsx
import React from 'react';
function Home() {
return (
<div>
<h1>Welcome to my app!</h1>
<p>This is the home page.</p>
</div>
);
}
export default Home;
JavaScript
//Contact.jsx
import React from 'react';
function Contact() {
return (
<div>
<h1>Contact Us</h1>
<p>Get in touch with us.</p>
</div>
);
}
export default Contact;
Output:
React Router Pros and Cons:
Pros:
- Organized Code: It keeps your app structure logical and maintainable.
- Declarative Routing: It has simple setup, intuitive path definitions.
- Dynamic URLs: It has powerful navigation based on user interactions or data.
- SEO-friendly: Supports SSR and SSG for better search visibility.
- Large Community & Ecosystem: Plenty of resources and solutions available.
Cons:
- Learning Curve: Requires some effort to understand the concepts and API.
- Boilerplate Code: Initial setup might involve repetitive code.
- Performance Overhead: Adds a slight overhead compared to manual routing.
- Complex for Large Apps: Managing extensive navigation can get intricate.
Similar Reads
How to Implement Webhooks in React ? To implement webhooks in React JS, you first need to set up a backend server to handle incoming webhook requests. This server should have endpoints to receive and process webhook data. Then, in your React application, you can use libraries like Axios or the native fetch API to send HTTP POST request
4 min read
How to setup 404 page in React Routing? When you're building a React app with routing, it's important to handle cases where users land on a page that doesn't exist. A 404 page is a good way to inform users that the page theyâre looking for cannot be found. Prerequisites:NPM & Node JSReact JSReact-router-domApproach to Set Up a 404 Pag
4 min read
Route Component in React Router React Router is a popular library used for managing routing in React applications. At its core lies the Route component, which plays a pivotal role in defining the relationship between URLs and corresponding components. In this article, we'll delve into the intricacies of the Route component, explor
5 min read
Routes Component in React Router Routes are an integral part of React Router, facilitating the navigation and rendering of components based on URL patterns. In this article, we'll delve into the concept of routes, understanding their role in React Router, and how to define and manage routes effectively. Table of Content What are Ro
4 min read
How To Implement Navigation In React JS ? React router is a powerful library that enables developers to manage navigation in a React application. It provides a way to define the routes and their corresponding components, allowing for a good user experience while navigating between different parts of any application. In this article, we will
2 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 Get Current Route In Next.js? Next.js is a popular React framework that makes it easy to build server-side rendered and static web applications. One common task in web development is determining the current route or URL of the page. In Next.js, this can be done using the built-in useRouter hook. This article will guide you throu
3 min read
How To Create A Multi-Page Website Using ReactJS? Multi-page website using ReactJS is the core for building complex web applications that require multiple views or pages. Previously where each page reloads entirely, ReactJS allows you to navigate between different pages without reloading the whole page thanks to libraries like React Router.In this
4 min read
Link Component in React Router React Router is a powerful library in ReactJS that is used to create SPA (single-page applications) seamlessly. One of the components of the React Router is Link. In this article, we will be seeing the working of the Link component, various props, and usage of the Link component within React Router
5 min read
Implementing React Router with Redux in React This article explores implementing React Router with Redux for enhanced state management and routing in React applications. Table of Content What is React Router and Redux?Approach to implement React Router in ReduxSteps to Setup the React AppWhat is React Router and Redux?React Router facilitates r
3 min read