1. What are Dynamic Routes?

Instead of hardcoding a route for every test or user, dynamic routing uses route parameters (prefixed with a colon :) that act as placeholders for dynamic IDs.

// Defining parameterized route in App.jsx
} />
} />

2. The useParams Hook

Inside the target component, call useParams() to extract the URL parameters:

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

function TestSessionScreen() {
  const { testId } = useParams();

  return (
    

      
Live Examination Session
      
Active Test ID: {testId}
    
  );
}

3. Programmatic Navigation with useNavigate

To navigate programmatically (e.g. redirecting a candidate to results after clicking "Submit Exam"):

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

function QuestionFooter({ testId }) {
  const navigate = useNavigate();

  const handleFinishExam = () => {
    // Process final score submission...
    navigate(`/test/${testId}/results`, { replace: true });
  };

  return End & Submit Exam;
}

4. Reading Query Parameters with useSearchParams

To read query string parameters like /exams?category=neet&sort=asc:

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

function ExamCatalog() {
  const [searchParams, setSearchParams] = useSearchParams();
  const category = searchParams.get("category") || "all";

  return 
Showing category: {category}
;
}