Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

import { useParams, useNavigate, Link } from 'react-router-dom';
import { useState, useEffect } from 'react';

function UserDetail() {
    const { id } = useParams();          // e.g. "42"
    const navigate = useNavigate();
    const [user, setUser] = useState(null);

useEffect(() => {
        fetch(`/api/users/${id}`)
            .then(r => r.json())
            .then(setUser);
    }, [id]);

function handleDelete() {
        fetch(`/api/users/${id}`, { method: 'DELETE' })
            .then(() => {
                // Replace history so Back doesn't return to deleted user
                navigate('/users', { replace: true });
            });
    }

if (!user) return <p>Loading…</p>;

return (
        <div>
            <h2>{user.name}</h2>
            <p>{user.email}</p>
            <Link to={`/users/${id}/edit`}>Edit</Link>
            <button onClick={handleDelete}>Delete</button>
            <button onClick={() => navigate(-1)}>Back</button>
        </div>
    );
}

// ── Programmatic navigation after login ───────────────────────────────────
function LoginForm() {
    const navigate = useNavigate();

async function handleSubmit(e) {
        e.preventDefault();
        const ok = await loginUser(new FormData(e.target));
        if (ok) navigate('/dashboard', { replace: true });
    }

return (
        <form onSubmit={handleSubmit}>
            <input name="email" type="email" />
            <input name="password" type="password" />
            <button type="submit">Login</button>
        </form>
    );
}