Routing — Multiple Pages

Level: Beginner

ℹ️ What You'll Learn

• React Router basics: BrowserRouter, Routes, Route
• Defining routes and page components
• Route parameters (:id) for dynamic pages
• Navigation with Link and useNavigate
• Nested routes and layout patterns
• Redirects and route guards
• Building SMS multi-page app: student list → detail → edit
• URL-based state management

Why This Matters

Routing — Multiple Pages is part of building maintainable React applications. You will use it when creating student dashboards, forms, tables, API-connected screens, routing flows, and reusable UI components.

Single-page apps (SPAs) have multiple "pages" managed by routes. Use React Router to handle navigation.

The Problem

Beginners often write React code that works for a small demo but becomes difficult when data, forms, API calls, and reusable components grow. This lesson explains Routing — Multiple Pages in a way that helps you build predictable UI for real .NET Web API projects.

React Router Basics

Install:

npm install react-router-dom

Basic setup:

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/students">Students</Link>
        <Link to="/teachers">Teachers</Link>
      </nav>
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/students" element={<StudentList />} />
        <Route path="/teachers" element={<TeacherList />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Welcome to School Management System</h1>;
}

function StudentList() {
  return <h1>Students</h1>;
}

function TeacherList() {
  return <h1>Teachers</h1>;
}

Dynamic Routes (URL Parameters)

<Routes>
  <Route path="/students" element={<StudentList />} />
  <Route path="/students/:id" element={<StudentDetail />} />
  <Route path="/students/:id/edit" element={<StudentEdit />} />
</Routes>

function StudentDetail() {
  const { id } = useParams();
  
  const [student, setStudent] = useState(null);
  
  useEffect(() => {
    fetch(`/api/students/${id}`)
      .then(r => r.json())
      .then(data => setStudent(data));
  }, [id]);
  
  if (!student) return <p>Loading...</p>;
  return <h1>{student.name}</h1>;
}

Navigation with useNavigate

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

function StudentCard({ student }) {
  const navigate = useNavigate();
  
  const handleViewDetails = () => {
    navigate(`/students/${student.id}`);
  };
  
  const handleEdit = () => {
    navigate(`/students/${student.id}/edit`);
  };
  
  return (
    <div>
      <h3>{student.name}</h3>
      <button onClick={handleViewDetails}>View</button>
      <button onClick={handleEdit}>Edit</button>
    </div>
  );
}

Complete School Management App

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

function App() {
  return (
    <BrowserRouter>
      <nav className="navbar">
        <h1>NexCoding Academy</h1>
        <ul>
          <li><Link to="/">Dashboard</Link></li>
          <li><Link to="/students">Students</Link></li>
          <li><Link to="/teachers">Teachers</Link></li>
          <li><Link to="/exams">Exams</Link></li>
          <li><Link to="/fees">Fees</Link></li>
        </ul>
      </nav>
      
      <div className="content">
        <Routes>
          <Route path="/" element={<Dashboard />} />
          
          <Route path="/students" element={<StudentList />} />
          <Route path="/students/:id" element={<StudentDetail />} />
          <Route path="/students/:id/edit" element={<StudentEdit />} />
          
          <Route path="/teachers" element={<TeacherList />} />
          <Route path="/teachers/:id" element={<TeacherDetail />} />
          
          <Route path="/exams" element={<ExamList />} />
          
          <Route path="/fees" element={<FeeList />} />
          
          <Route path="*" element={<NotFound />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

function Dashboard() {
  return <h1>Dashboard</h1>;
}

function StudentList() {
  return <h1>Students</h1>;
}

function StudentDetail() {
  const { id } = useParams();
  return <h1>Student {id}</h1>;
}

function StudentEdit() {
  const { id } = useParams();
  return <h1>Edit Student {id}</h1>;
}

function TeacherList() {
  return <h1>Teachers</h1>;
}

function TeacherDetail() {
  const { id } = useParams();
  return <h1>Teacher {id}</h1>;
}

function ExamList() {
  return <h1>Exams</h1>;
}

function FeeList() {
  return <h1>Fees</h1>;
}

function NotFound() {
  return <h1>404 - Page Not Found</h1>;
}

Route Nesting

<Routes>
  <Route path="/school/*" element={<SchoolLayout />}>
    <Route path="students" element={<StudentList />} />
    <Route path="students/:id" element={<StudentDetail />} />
  </Route>
</Routes>

function SchoolLayout() {
  return (
    <div>
      <h1>School Management</h1>
      <Outlet /> {/* Where nested routes render */}
    </div>
  );
}

Query Parameters

// URL: /students?class=10&status=active

function StudentList() {
  const [searchParams] = useSearchParams();
  
  const className = searchParams.get('class');
  const status = searchParams.get('status');
  
  return (
    <div>
      <h1>Students</h1>
      {className && <p>Class: {className}</p>}
      {status && <p>Status: {status}</p>}
    </div>
  );
}

Protected Routes (Authentication)

function ProtectedRoute({ isAuthenticated, children }) {
  return isAuthenticated ? children : <Navigate to="/login" />;
}

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        
        <Route
          path="/students"
          element={
            <ProtectedRoute isAuthenticated={isAuthenticated}>
              <StudentList />
            </ProtectedRoute>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}

Programmatic Navigation

function StudentForm() {
  const navigate = useNavigate();
  
  const handleSubmit = async (formData) => {
    try {
      const response = await fetch('/api/students', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });
      
      const student = await response.json();
      
      // Navigate to newly created student
      navigate(`/students/${student.id}`);
    } catch (err) {
      console.error(err);
    }
  };
  
  return <form onSubmit={handleSubmit}>{/* form */}</form>;
}

Key Takeaways

• Use React Router for multi-page apps
• Dynamic routes with :id params
• useParams() to access URL params
• Link for navigation, useNavigate() for programmatic
• Protect routes with authentication checks
• Next: Context API for shared state

⚠️ Routing Mistakes

1. Not wrapping in BrowserRouter — Routes won't work
2. Using <a> instead of <Link> — Full page reload
3. Not handling 404 — User confused
4. Deep nesting — Hard to maintain

💡 Route Organization

Keep routes organized:

const routes = [
  { path: '/', element: <Home /> },
  { path: '/students/*', element: <StudentRoutes /> },
  { path: '/teachers/*', element: <TeacherRoutes /> },
  { path: '*', element: <NotFound /> }
];

🤖Use AI to Learn Faster

Use ChatGPT, Claude, or Copilot to go deeper on React Router. Try these prompts:

• "What's the difference between Link and useNavigate?"
• "How do you access URL parameters in a component?"
• "How would you protect routes that require authentication?"
• "Quiz me on React Router"

💡 Tip: After reading this article, paste your own code into AI and ask "What could go wrong here and why?" — fastest way to find edge cases and deepen understanding.

Quick Definitions

• Routing — Multiple Pages - The main React concept explained in this lesson.
• Component - A reusable function that returns UI.
• Props/state/effects - Core React ideas used to pass data, remember data, and run side effects.
• Real project usage - How this appears in forms, dashboards, routes, and API-connected pages.

Common Mistakes

• Copying React code without understanding data flow
• Mutating arrays or objects directly instead of creating new values
• Forgetting keys, dependencies, loading states, or error states where needed
• Putting too much logic in one component
• Not testing the screen with realistic School Management System data

Practice Task

Create a small React example using Routing — Multiple Pages. Keep it focused on one School Management System screen.

Suggested practice:

1. Build a small component or page for students, attendance, marks, or fees.
2. Pass realistic data into the component.
3. Add one success state and one empty/error state where relevant.
4. Explain the data flow in your own words.
5. Rebuild the same example once without looking at the article.

Quick Revision

Question	Answer
What is the main idea?	Understand and apply Routing — Multiple Pages in React.
Where is it used?	Student dashboards, forms, tables, routes, and API-connected screens.
What should beginners focus on?	Clear components, predictable data flow, and small examples.
What is the best debugging habit?	Check props, state, render output, and browser console step by step.

🎯 How would you explain Routing — Multiple Pages in an interview?

Routing — Multiple Pages is a React concept used to build clear, reusable, and predictable user interfaces. I would explain the problem it solves, show a small component example, and mention a common mistake beginners should avoid.

🎯 Where is this used in a real React project?

It is used in screens like student lists, admission forms, attendance dashboards, marks reports, routing pages, and API-connected admin panels.

Next Article

Context API — Shared State ->