The Power of Dynamic Paths

Imagine you're creating an Instagram clone. You have millions of users. You won't write a route for each in code: /user/ivan, /user/petr? For this, dynamic parameters exist.

1. Colon — Secret Sign

In route settings we write:

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

The colon (:) tells React Router: " Everything that comes after /user/, don't take literally. Save it in a variable called username" .

2. useParams: How to Extract Data from Address?

Inside the UserProfile component, we need to understand whose profile to open. We call the useParams hook:

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

function UserProfile() {
  const { username } = useParams(); // Extract 'ivan' or 'petr' from URL
  
  // Now we can send a request to server: fetch('/api/users/' + username)
  return <h1>User profile: {username}</h1>;
}

3. useNavigate: Programmatic Teleport

Sometimes a transition should happen not because a person pressed a link, but because some condition triggered in code. For example: Person filled login form, pressed " Enter " , server responded " OK " . Now we need to teleport them to the dashboard.

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

function LoginPage() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // ... password check ...
    navigate('/dashboard'); // Instant user transfer
  };

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

4. Why Is This Important?

Dynamic routing allows creating scalable applications. You write logic once, and it works for an infinite number of products, articles, or users. This is the heart of the modern web.

Remember: URL is also data. Routing hooks help your components read this data and react to it.