Using React.js for routing

In this blog, we will learn how to use React.js for routing.

Introduction

Routing is an essential feature in modern web applications, enabling users to move between different pages or views seamlessly. In React.js, navigation is efficiently managed using the React Router library.

What is React Router?

React Router is a tool used to manage navigation within React applications, allowing seamless transitions between different views or pages. It allows for dynamic navigation without refreshing the entire page, resulting in a smoother user experience.

Key Features of React Router

• Supports dynamic routing for flexible navigation
• Enables nested routes for structured UI designs
• Provides route parameters to pass dynamic values
• Allows programmatic navigation for enhanced control
• Supports protected routes to manage authentication-based access

Installing React Router

To start using React Router, install the required package via npm: npm install react-router-dom

After installation, you can import and use the necessary components in your application.

Configuring React Router in a React Application

To implement routing, enclose the entire application within the _{<BrowserRouter>} component.

Inside it, define the routes using _<Routes> and _<Route>^. Example:

Basic Routing

import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
const Home = () => <h2>Home Page</h2>; const About = () => <h2>About Page</h2>;
const Contact = () => <h2>Contact Page</h2>;
function App() {   return (     <Router>
      <nav>
        <Link to="/">Home</Link> |  
        <Link to="/about">About</Link> |  
        <Link to="/contact">Contact</Link>  
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );

}

export default App;

Explanation :

• <BrowserRouter> is used to enable routing.
• _<Routes> groups all the _<Route> components.
• Each _<Route> defines a path (_{path=”…”}) and its corresponding component (element={<Component />}
• _<Link> replaces _<a> to prevent full-page reloads, improving navigation efficiency.

Dynamic Routing in React

In many cases, applications need to handle dynamic URLs, such as user profiles or product pages. React Router facilitates this with route parameters.

Example: Dynamic Routing

import React from "react";
import { BrowserRouter as Router, Routes, Route, useParams } from "react-router-dom";
const UserProfile = () => {
  const { id } = useParams(); // Retrieve the dynamic parameter from the URL   return <h2>User Profile: {id}</h2>;
}
function App() {   return (     <Router>
      <Routes>
        <Route path="/user/:id" element={<UserProfile />} />
      </Routes>
    </Router>
  );
}

export default App;

Explanation :

• _:id in the route (_/user/:id) serves as a placeholder for a dynamic value. ✅ _useParams() retrieves the value of _id from the URL.

Conclusion

React Router simplifies navigation in React applications, making them more dynamic and user-friendly. This guide covered:

• Basic routing implementation
• Handling dynamic routes using parameters

By applying these concepts, you can enhance your React application’s navigation system and create a smooth and efficient user experience.