How do you navigate programmatically and work with route parameters (Params)?

Short answer

Use useNavigate to redirect the user in response to an event and useParams to read dynamic parameters from the URL.

Explanation

useNavigate provides a function that accepts a route or history number (such as navigate(-1) to go back), with options such as replace to replace the history entry. useParams parses segments such as :id and returns an object containing their values.

Code example

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

function OrderDetails() {
  const { orderId } = useParams<{ orderId: string }>();
  const navigate = useNavigate();

  const handleComplete = () => {
    // Run order-completion logic, then navigate to the thank-you page
    navigate('/thank-you', { replace: true });
  };

  return <div>Order #{orderId} <button onClick={handleComplete}>Complete</button></div>;
}

Common mistakes

• Calling navigate directly in a component body during Render instead of in event handlers or useEffect.

Follow-up questions

• What are Nested Routes, and how do you use <Outlet /> to structure interfaces?

Sources

• React Router docs — useNavigate
• React Router docs — useParams