React Router: A Introductory Guide

Setting Up the Project Structure

First, let's create our page components. In your src/pages/ folder, create the following files:

• HomePage.js
• BooksPage.js
• BookDetailPage.js
• AboutPage.js
• ContactPage.js
• NotFoundPage.js

Let's also create a layout component that will be shared across all pages. In your src/components/ folder, create:

• MainLayout.js
• Navigation.js

Creating the Page Components

Let's implement simple versions of each page component. Here's an example for HomePage.js:

// src/pages/HomePage.js
import React from 'react';

function HomePage() {
  return (
    <div className="home-page">
    <h1>Welcome to Our Bookstore</h1>
    <p>Discover the joy of reading with our carefully curated collection of books.</p>
    <div className="featured-books">
      <h2>Featured Books</h2>
      {/* Featured books would go here */}
    </div>
  </div>
  );
}

export default HomePage;

Similar structure would apply to the other page components, each with content specific to their purpose.

For the BookDetailPage.js, we'll need to use URL parameters:

// src/pages/BookDetailPage.js
import React from 'react';
import { useParams } from 'react-router-dom';

function BookDetailPage() {
  // This extracts the bookId parameter from the URL
  const { bookId } = useParams();
  
  // In a real application, you would fetch book details based on the bookId
  
  return (
    <div className="book-detail">
      <h1>Book Details
      <p>You are viewing book with ID: {bookId}

      {/* Book details would go here */}
    </div>
  );
}

export default BookDetailPage;

Creating the Layout Components

Now, let's create our layout components. First, the navigation:

// src/components/Navigation.js
import React from 'react';
import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav className="main-nav">
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/books">Books</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/contact">Contact</Link></li>
    </ul>
  </nav>
  );
}

export default Navigation;

And now the main layout:

// src/components/MainLayout.js
import React from 'react';
import { Outlet } from 'react-router-dom';
import Navigation from './Navigation';

function MainLayout() {
  return (
    <div className="layout">
    <header>
      <h1>PageTurner Books</h1>
      <Navigation />
    </header>
    
    <main>
      {/* This is where child routes will be rendered */}
      <Outlet />
    </main>
    
    <footer>
      <p>© 2025 PageTurner Books. All rights reserved.</p>
    </footer>
  </div>
  );
}

export default MainLayout;

Notice the <Outlet /> component. This is where the content of each page will be rendered, while keeping the header and footer consistent across all pages. It's like a picture frame that can display different pictures while the frame remains the same.

Setting Up the Router

Now, let's put everything together by setting up our router in App.js:

// src/App.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// Import layouts
import MainLayout from './components/MainLayout';

// Import pages
import HomePage from './pages/HomePage';
import BooksPage from './pages/BooksPage';
import BookDetailPage from './pages/BookDetailPage';
import AboutPage from './pages/AboutPage';
import ContactPage from './pages/ContactPage';
import NotFoundPage from './pages/NotFoundPage';

function App() {
  return (
    <BrowserRouter>
    <Routes>
      <Route path="/" element={<MainLayout />}>
        {/* Index route - shown at the parent's path */}
        <Route index element={<HomePage />} />
        
        {/* Child routes - will be rendered in the parent's Outlet */}
        <Route path="books" element={<BooksPage />} />
        <Route path="books/:bookId" element={<BookDetailPage />} />
        <Route path="about" element={<AboutPage />} />
        <Route path="contact" element={<ContactPage />} />
        
        {/* Catch-all route for 404 errors */}
        <Route path="*" element={<NotFoundPage />} />
      </Route>
    </Routes>
  </BrowserRouter>
  );
}

export default App;

Let's break down what's happening here:

1. BrowserRouter is the wrapper component that enables routing functionality.
2. Routes is a container for all your Route components.
3. The parent Route renders the MainLayout component when any path matches.
4. Child routes are nested inside the parent route and rendered via the Outlet in MainLayout.
5. The index route is shown when the path is exactly /.
6. The :bookId in books/:bookId is a URL parameter that can be accessed using useParams.
7. The * path is a catch-all for any unmatched routes, showing the 404 page.

Navigating Between Routes

There are three main ways to navigate between routes in React Router:

Using Link Component

We've already seen this in our Navigation component. The Link component is like a regular <a> tag but prevents the default page reload:

<Link to="/books">View All Books</Link>

Using NavLink Component

NavLink is a special version of Link that adds an "active" class when the current URL matches its "to" prop:

// src/components/Navigation.js (updated)
import React from 'react';
import { NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <nav className="main-nav">
    <ul>
      <li><NavLink to="/" end>Home</NavLink></li>
      <li><NavLink to="/books">Books</NavLink></li>
      <li><NavLink to="/about">About</NavLink></li>
      <li><NavLink to="/contact">Contact</NavLink></li>
    </ul>
  </nav>
  );
}

export default Navigation;

The end prop on the home link ensures it's only active when the path is exactly /, not when we're at child routes.

Using Programmatic Navigation

Sometimes you need to navigate programmatically, such as after form submission or based on certain conditions:

// Example of programmatic navigation
import React from 'react';
import { useNavigate } from 'react-router-dom';

function SearchForm() {
  const navigate = useNavigate();
  const [searchTerm, setSearchTerm] = React.useState('');
  
  const handleSubmit = (e) => {
    e.preventDefault();
    // Navigate to search results with query parameter
    navigate(`/books?search=${searchTerm}`);
  };
  
  return (
    <form onSubmit={handleSubmit}>
    <input 
      type="text" 
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      placeholder="Search for books..."
    />
    <button type="submit">Search</button>
  </form>
  );
}

export default SearchForm;

This is like having a teleportation remote control in your hand, allowing you to transport the user to any route in your application based on logic in your code.

Working with URL Parameters and Query Strings

URL Parameters

We've already seen how to define a route with parameters (books/:bookId) and access them with useParams. This is useful for resource-specific pages like product details, user profiles, or blog posts.

URL parameters are like variable sections in an address. Just as 123 Main Street and 456 Main Street are on the same street but lead to different houses, /books/1 and /books/2 use the same route pattern but display different books.

Query Parameters

Query parameters (like /books?category=fiction&sort=newest) can be accessed using the useSearchParams hook:

// Example of using query parameters
import React from 'react';
import { useSearchParams } from 'react-router-dom';

function BooksPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  
  // Get query parameters
  const category = searchParams.get('category') || 'all';
  const sort = searchParams.get('sort') || 'newest';
  
  // Function to update query parameters
  const updateFilters = (newCategory) => {
    setSearchParams({ category: newCategory, sort });
  };
  
  return (
    <div className="books-page">
      <h1>Books</h1>
      
      <div className="filters">
        <button onClick={() => updateFilters('all')}>
          All
        </button>
        <button onClick={() => updateFilters('fiction')}>
          Fiction
        </button>
        <button onClick={() => updateFilters('non-fiction')}>
          Non-Fiction
        </button>
      </div>
      
      <p>Showing {category} books, sorted by {sort}</p>
      
      {/* Book listings would go here */}
    </div>
  );
}

export default BooksPage;

Query parameters are like specifications for a request. If URL parameters are the address of a restaurant, query parameters are your special instructions: "table for four, by the window, no garlic in the food."

Protected Routes and Authentication

In many applications, certain routes should only be accessible to authenticated users. We can create a protected route wrapper component:

// src/components/ProtectedRoute.js
import React from 'react';
import { Navigate, useLocation } from 'react-router-dom';

function ProtectedRoute({ children }) {
  const location = useLocation();
  const isAuthenticated = localStorage.getItem('token'); // Simple example
  
  if (!isAuthenticated) {
    // Redirect to login page, but save the current location they were trying to access
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  
  return children;
}

export default ProtectedRoute;

Then we can use it in our routes:

// In App.js
// ...
<Route path="account" element={
  <ProtectedRoute>
  <AccountPage />
</ProtectedRoute>
} />
// ...

This is like having a bouncer at a VIP section of a club. If you don't have the right credentials, you're politely redirected to the entrance where you can get properly checked in.

Lazy Loading Routes

For larger applications, you might want to split your code into smaller chunks and load them only when needed. This can significantly improve initial load time:

// src/App.js with lazy loading
import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

// Import layouts
import MainLayout from './components/MainLayout';

// Import always-loaded pages
import HomePage from './pages/HomePage';
import NotFoundPage from './pages/NotFoundPage';

// Lazy load other pages
const BooksPage = lazy(() => import('./pages/BooksPage'));
const BookDetailPage = lazy(() => import('./pages/BookDetailPage'));
const AboutPage = lazy(() => import('./pages/AboutPage'));
const ContactPage = lazy(() => import('./pages/ContactPage'));

function App() {
  return (
    <BrowserRouter>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<MainLayout />}>
          <Route index element={<HomePage />} />
          <Route path="books" element={<BooksPage />} />
          <Route path="books/:bookId" element={<BookDetailPage />} />
          <Route path="about" element={<AboutPage />} />
          <Route path="contact" element={<ContactPage />} />
          <Route path="*" element={<NotFoundPage />} />
        </Route>
      </Routes>
    </Suspense>
  </BrowserRouter>
  );
}

export default App;

This is like having a library where books are stored in the back room and only brought out when a reader asks for them, rather than placing all books on display at once. It saves space (bandwidth) and makes the initial entry much quicker.