Routing and Protected Routing In React

3 min readFeb 22, 2025

Routing is a core part of any application, but it can introduce various challenges. One key consideration is that URLs should not be changed frequently, as this can impact SEO and user experience.

Example:

Consider the following routes:

/products/electronics/apple
/team
/profile

Now, if we decide to move the Team page under the Profile page, the route changes from /team to /profile/team.

Issues:

SEO Impact:

Search engines have already crawled /team, so moving it to /profile/team means the page must be re-indexed.
Until the new URL is indexed, the old one might still appear in search results, leading to a “Page Not Found” error for users.

User Experience:

Users may have bookmarked the old URL (/team), causing broken links when they revisit.
To prevent this, we need to implement redirection from the old route to the new one.

Multi-Page vs. Single-Page Applications

In traditional multi-page applications , each route corresponds to a separate HTML file:

/about → about.html
/team → team.html

When navigating between pages, the browser makes a network request and loads a new page.

However, in single-page applications (SPAs) like React, routing becomes more complex:

There are no separate HTML files (e.g., about.html or team.html).
Instead, routing is handled within the frontend code using routing libraries, such as React Router.

React Router for Client-Side Routing

To enable routing in a React application, we use react-router-dom.

Example: Basic Routing

First, install react-router-dom: npm install react-router-dom

Then, set up routing in App.js:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Header from "./Header";
import Home from "./Home";
import About from "./About";
import Team from "./Team";

function App(){
 <div>
    <Header>
       <nav>
         <a href="/">Home</a>
         <a href="/about">About</a>
         <a href="/team">Team</a>
       </nav>
    </Header>
  <BrowserRouter>
        <Routes>
          <Route path="/" element={<Body />}></Route>
          <Route path="/team" element={<Team />}></Route>
          <Route path="/about" element={<About />}></Route>
          <Route path="/login" element={<Login />}></Route>
        </Routes>
      </BrowserRouter>
 </div>
}

Protected Routes in React

A protected route restricts access to certain pages based on authentication. To implement this, we create a wrapper component called ProtectedRoute.js.

Steps:

Create a ProtectedRoute.js component.
Wrap the protected pages inside <ProtectedRoute> in App.js.
Check authentication inside ProtectedRoute.

In ProtectedRoute.js

import { Navigate, Outlet } from "react-router-dom";

function ProtectedRoute() {
  const isAuth = false; // Change this based on authentication logic

  return isAuth ? <Outlet /> : <Navigate to="/login" />;
}

export default ProtectedRoute;

In App.js

what I have done is At the root level, I have created a Protected Route and added child routes inside it. The ProtectedRoute component is responsible for managing its child routes. All authentication logic will be handled within the ProtectedRoute component.

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Header from "./Header";
import Home from "./Home";
import About from "./About";
import Team from "./Team";
import Login from "./Login";
import ProtectedRoute from "./ProtectedRoute";

function App() {
  return (
    <div>
        <Header>
           <nav>
             <a href="/">Home</a>
             <a href="/about">About</a>
             <a href="/team">Team</a>
             <a href="/loign">Login</a>
           </nav>
        </Header>
        <BrowserRouter>
        <Routes>
          <Route path="/" element={<Body />}></Route>
          <Route element={<ProtectedRoute />}>   {/* we will add an empty route which means which does not have any path */}
            <Route path="/about" element={<About />}></Route>
            <Route path="/team" element={<Team />}></Route>
          </Route>
          <Route path="/login" element={<Login />}></Route>
        </Routes>
      </BrowserRouter>
 </div>
  );
}

export default App;

Key Takeaways:

Client-side routing is essential for SPAs but requires additional handling for SEO and user experience.
Redirection helps prevent broken links when URLs change.
Protected routes ensure only authenticated users can access certain pages.
React Router provides a powerful way to manage routes in a React application.

If you find this post helpful, please consider buying me a coffee! ☕