React Router and Multi-Page Navigation in the PERN Stack

Introduction

In the previous article, we learned how to:

• Connect React frontend with Express backend

• Fetch API data

• Use fetch() and Axios

• Display database records

• Handle forms

• Perform CRUD operations

Now it is time to make our application look like a real-world website by adding:

• Multiple pages

• Navigation

• Routing

• Protected pages

This is done using:
React Router

In this article, we will learn:

• What React Router is

• Why routing is needed

• Installing React Router

• Creating pages

• Navigation using Link

• Dynamic routing

• URL parameters

• Protected routes

• Frontend project structure

---

What is Routing?

Routing means:

Switching between different pages in an application

Examples:

• Home page

• About page

• Login page

• Dashboard page

Without routing, users cannot move between pages properly.

---

Traditional Routing vs React Routing

Traditional Website	React Application
Entire page reloads	Only UI changes
Slower navigation	Faster navigation
Server handles pages	React handles pages

---

What is React Router?

React Router is a library used for:

• Navigation

• URL management

• Multi-page applications

It helps React applications behave like real websites.

---

Installing React Router

Open terminal inside client folder:

npm install react-router-dom

---

Understanding react-router-dom

The package:

react-router-dom

provides:

• BrowserRouter

• Routes

• Route

• Link

• useNavigate

• useParams

These help create navigation systems.

---

Basic Routing Structure

Inside:

src/App.js

add:

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

function App() {

    return (

        <BrowserRouter>

            <Routes>

                <Route path="/" element={<h1>Home</h1>} />

                <Route path="/about" element={<h1>About</h1>} />

            </Routes>

        </BrowserRouter>
    );
}

export default App;

---

Understanding the Code

Component	Purpose
BrowserRouter	Enables routing
Routes	Holds all routes
Route	Defines page route

---

What is path?

path="/about"

defines URL path.

Example:

http://localhost:3000/about

---

What is element?

element={<About />}

defines which component should load.

---

Creating Separate Page Components

Inside:

src/pages

create files:

• Home.js

• About.js

• Contact.js

---

Example Home Component

function Home() {

    return (
        <h1>Home Page</h1>
    );
}

export default Home;

---

Example About Component

function About() {

    return (
        <h1>About Page</h1>
    );
}

export default About;

---

Updating App.js

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

import Home from './pages/Home';
import About from './pages/About';

function App() {

    return (

        <BrowserRouter>

            <Routes>

                <Route path="/" element={<Home />} />

                <Route path="/about" element={<About />} />

            </Routes>

        </BrowserRouter>
    );
}

export default App;

---

Navigation Using Link

React Router provides:

<Link>

for navigation.

---

Why Link is Better Than anchor Tag

Wrong:

<a href="/about">About</a>

This reloads the page.

Correct:

<Link to="/about">About</Link>

This updates UI without reload.

---

Example Navbar

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

function Navbar() {

    return (

        <div>

            <Link to="/">Home</Link>

            <Link to="/about">About</Link>

        </div>
    );
}

export default Navbar;

---

Adding Navbar to App

<>
    <Navbar />

    <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

    </Routes>
</>

---

Dynamic Routing

Dynamic routing allows URLs like:

/students/1
/students/2
/students/3

---

Creating Dynamic Route

<Route
    path="/students/:id"
    element={<Student />}
/>

---

What is :id?

:id

is called a route parameter.

It changes dynamically based on URL.

---

Accessing Route Parameters

React Router provides:

useParams()

---

Example of useParams

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

function Student() {

    const { id } = useParams();

    return <h1>Student ID: {id}</h1>;
}

export default Student;

---

Output Example

If URL is:

/students/5

Output:

Student ID: 5

---

Programmatic Navigation

React Router provides:

useNavigate()

for navigation using JavaScript.

---

Example of useNavigate

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

function Login() {

    const navigate = useNavigate();

    const handleLogin = () => {

        navigate('/dashboard');
    };

    return (
        <button onClick={handleLogin}>
            Login
        </button>
    );
}

export default Login;

---

Protected Routes

Some pages should only be accessible after login.

Examples:

• Dashboard

• Profile

• Admin panel

These are called:

Protected Routes

---

Simple Protected Route Example

function ProtectedRoute({ children }) {

    const isLoggedIn = true;

    if (!isLoggedIn) {

        return <h1>Access Denied</h1>;
    }

    return children;
}

---

Using Protected Route

<Route
    path="/dashboard"
    element={
        <ProtectedRoute>
            <Dashboard />
        </ProtectedRoute>
    }
/>

---

Nested Routing

Nested routes help create layouts like:

• Dashboard sidebar

• Admin panels

• Settings pages

---

Example Nested Route

<Route path="/dashboard">

    <Route path="profile" element={<Profile />} />

    <Route path="settings" element={<Settings />} />

</Route>

---

React Frontend Folder Structure

Professional React structure:

src
│
├── components
├── pages
├── services
├── hooks
├── context
├── App.js
└── index.js

---

Understanding Each Folder

Folder	Purpose
components	Reusable UI
pages	Page components
services	API calls
hooks	Custom hooks
context	Global state

---

Creating Reusable Components

Examples:

• Navbar

• Sidebar

• Footer

• Buttons

• Cards

Reusable components reduce duplicate code.

---

Common Routing Mistakes

Forgetting BrowserRouter

Wrong:

<Routes>

Correct:

<BrowserRouter>

---

Using anchor Tags

Wrong:

<a href="/home">

Correct:

<Link to="/home">

---

Wrong Route Path

Wrong:

<Route path="about">

Correct:

<Route path="/about">

---

Real-World Applications of Routing

Routing is used in:

• E-commerce websites

• Student portals

• Banking systems

• SaaS dashboards

• Social media platforms

Without routing, large applications become impossible to manage.

---

Best Practices

Keep Routes Organized

Use separate files for:

• Public routes

• Protected routes

• Admin routes

---

Create Layout Components

Example:

• MainLayout

• DashboardLayout

---

Use Meaningful URLs

Good:

/students/5

Bad:

/page123

---

Lazy Load Components

Large applications should load pages only when needed.

This improves performance.

---

Conclusion

You have now learned how to build multi-page React applications using React Router.

You learned:

• Routing

• Navigation

• Dynamic routes

• Route parameters

• Protected routes

• useNavigate()

• useParams()

• Frontend structure

Now your React application is starting to look like a professional production-level application.