How does a router like React Router or Angular Router manage dynamic URL parameters?

Routers like React Router and Angular Router manage dynamic URL parameters by allowing you to define placeholders in the route path. These placeholders capture segments of the URL, which can then be accessed in your components to fetch data, display dynamic content, or perform logic based on the URL.

✅ React Router (v6+)

🔹 Defining a Route with Dynamic Parameters

You define a route using : followed by the parameter name:

<Route path="/users/:userId" element={<UserProfile />} />

This matches URLs like /users/123 or /users/john.

🔹 Accessing Dynamic Parameters

Use the useParams() hook inside the component:

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

function UserProfile() {
  const { userId } = useParams(); // userId will be '123' for /users/123
  return <div>User ID: {userId}</div>;
}

You can then use this value to make API calls, fetch data, etc.

✅ Angular Router

🔹 Defining a Route with Dynamic Parameters

In your route configuration (app-routing.module.ts):

const routes: Routes = [
  { path: 'users/:userId', component: UserProfileComponent }
];

🔹 Accessing Dynamic Parameters

Use ActivatedRoute in the component:

import { ActivatedRoute } from '@angular/router';

export class UserProfileComponent {
  userId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.userId = this.route.snapshot.paramMap.get('userId')!;
    // Or use observables:
    // this.route.paramMap.subscribe(params => {
    //   this.userId = params.get('userId')!;
    // });
  }
}

🧠 What’s Happening Behind the Scenes?

1. Pattern Matching: The router parses the current URL and matches it against route definitions.

2. Parameter Extraction: If a dynamic segment (:param) is in the route path, the router extracts the corresponding value from the URL.

3. Injection: The router makes these values available to the component—via hooks (useParams) in React or services (ActivatedRoute) in Angular.

✅ Summary Table

Feature	React Router	Angular Router
Route Param Syntax	:param	:param
Access Method	useParams()	ActivatedRoute → paramMap
Supports Nested Routes	✅	✅
Dynamic Route Matching	✅	✅