React Routing – Navigating Single Page Applications - Learn REACTJS | Revochamp

Name: React Routing – Navigating Single Page Applications
Availability: InStock
Author: Revochamp

What is Client-Side Routing?

In a Single Page Application (SPA), the browser doesn't request a new HTML document from the server every time a user clicks a link. Instead, React Router intercepts the URL change and updates the UI components dynamically. This results in a faster, app-like experience without full page reloads.

Core Components of React Router

BrowserRouter: The parent component that stores the current location and navigates using the browser's history API.
Routes & Route: The configuration where you define which component should render for a specific path.
Link & NavLink: Components used to navigate between routes (replaces the standard <a> tag).
Navigate: A component used for programmatically redirecting users.

Basic Route Setup

React JSXRead-only

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

Dynamic Routing & URL Parameters

Often you need to render the same component for different IDs (e.g., a User Profile). You can use 'colon' syntax to define a parameter and the useParams hook to retrieve it.

React JSXRead-only

import { useParams } from 'react-router-dom';

// Definition: <Route path="/user/:id" element={<UserProfile />} />

function UserProfile() {
  const { id } = useParams();
  return <h2>Viewing Profile for User ID: {id}</h2>;
}

import { useParams } from 'react-router-dom';

// Definition: <Route path="/user/:id" element={<UserProfile />} />

function UserProfile() {
  const { id } = useParams();
  return <h2>Viewing Profile for User ID: {id}</h2>;
}

Nested Routes & Outlets

Nested routing allows you to swap out only a sub-section of your UI while keeping a parent layout (like a sidebar) consistent. Use the <Outlet /> component to tell the parent where to render the child route.

React JSXRead-only

function DashboardLayout() {
  return (
    <div className="dashboard">
      <Sidebar />
      <div className="content">
        <Outlet /> {/* Child routes render here */}
      </div>
    </div>
  );
}

// Config:
// <Route path="/dashboard" element={<DashboardLayout />}>
//   <Route path="stats" element={<Stats />} />
//   <Route path="settings" element={<Settings />} />
// </Route>

function DashboardLayout() {
  return (
    <div className="dashboard">
      <Sidebar />
      <div className="content">
        <Outlet /> {/* Child routes render here */}
      </div>
    </div>
  );
}

// Config:
// <Route path="/dashboard" element={<DashboardLayout />}>
//   <Route path="stats" element={<Stats />} />
//   <Route path="settings" element={<Settings />} />
// </Route>

Try it yourself

import React from 'react';
import { BrowserRouter, Routes, Route, Link, useParams, useNavigate } from 'react-router-dom';

const Home = () => <h3>Home Page</h3>;
const About = () => <h3>About Page</h3>;
const User = () => {
  const { name } = useParams();
  return <h3>Hello, {name}!</h3>;
};

export default function App() {
  return (
    <BrowserRouter>
      <div style={{ padding: '20px' }}>
        <nav style={{ marginBottom: '20px' }}>
          <Link to="/" style={{ marginRight: '10px' }}>Home</Link>
          <Link to="/about" style={{ marginRight: '10px' }}>About</Link>
          <Link to="/user/Kishore">Profile</Link>
        </nav>

        <div style={{ border: '1px solid #ccc', padding: '10px' }}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/user/:name" element={<User />} />
          </Routes>
        </div>
      </div>
    </BrowserRouter>
  );
}

Test Your Knowledge

of 3

Which hook is used to access dynamic URL segments like /product/:id?

useLocation

useParams

useNavigate

useRoute

of 3

Which component acts as a placeholder for nested child routes?

of 3

What is the primary advantage of SPAs and client-side routing?

Better SEO for all search engines

No need for a backend server

Faster transitions without full page refreshes

Smaller JavaScript bundles

Frequently Asked Questions

Link vs NavLink?

Link is for basic navigation. NavLink is a special version that knows if it is 'active', allowing you to style the current page link easily.

How to navigate programmatically?

Use the useNavigate hook. Example: const navigate = useNavigate(); navigate('/home');.

What is a Protected Route?

It's a custom component that checks for authentication before rendering a route, redirecting to login if the user isn't authorized.

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'; function App() { return ( <BrowserRouter> <nav> <Link to="/">Home</Link> <Link to="/about">About</Link> </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="*" element={<NotFound />} /> </Routes> </BrowserRouter> ); }

import { useParams } from 'react-router-dom'; // Definition: <Route path="/user/:id" element={<UserProfile />} /> function UserProfile() { const { id } = useParams(); return <h2>Viewing Profile for User ID: {id}</h2>; }

function DashboardLayout() { return ( <div className="dashboard"> <Sidebar /> <div className="content"> <Outlet /> {/* Child routes render here */} </div> </div> ); } // Config: // <Route path="/dashboard" element={<DashboardLayout />}> // <Route path="stats" element={<Stats />} /> // <Route path="settings" element={<Settings />} /> // </Route>

Try it yourself

import React from 'react';
import { BrowserRouter, Routes, Route, Link, useParams, useNavigate } from 'react-router-dom';

const Home = () => <h3>Home Page</h3>;
const About = () => <h3>About Page</h3>;
const User = () => {
  const { name } = useParams();
  return <h3>Hello, {name}!</h3>;
};

export default function App() {
  return (
    <BrowserRouter>
      <div style={{ padding: '20px' }}>
        <nav style={{ marginBottom: '20px' }}>
          <Link to="/" style={{ marginRight: '10px' }}>Home</Link>
          <Link to="/about" style={{ marginRight: '10px' }}>About</Link>
          <Link to="/user/Kishore">Profile</Link>
        </nav>

        <div style={{ border: '1px solid #ccc', padding: '10px' }}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/user/:name" element={<User />} />
          </Routes>
        </div>
      </div>
    </BrowserRouter>
  );
}

Test Your Knowledge

of 3

Which hook is used to access dynamic URL segments like /product/:id?

useLocation

useParams

useNavigate

useRoute

of 3

Which component acts as a placeholder for nested child routes?

of 3

What is the primary advantage of SPAs and client-side routing?

Better SEO for all search engines

No need for a backend server

Faster transitions without full page refreshes

Smaller JavaScript bundles

Frequently Asked Questions

Link vs NavLink?

Link is for basic navigation. NavLink is a special version that knows if it is 'active', allowing you to style the current page link easily.

How to navigate programmatically?

Use the useNavigate hook. Example: const navigate = useNavigate(); navigate('/home');.

What is a Protected Route?

It's a custom component that checks for authentication before rendering a route, redirecting to login if the user isn't authorized.

React Routing – Navigating Single Page Applications

React Routing – Navigating Single Page Applications

What is Client-Side Routing?

Core Components of React Router

Basic Route Setup

Dynamic Routing & URL Parameters

Nested Routes & Outlets

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?

React Routing – Navigating Single Page Applications

React Routing – Navigating Single Page Applications

What is Client-Side Routing?

Core Components of React Router

Basic Route Setup

Dynamic Routing & URL Parameters

Nested Routes & Outlets

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?