Blog>
Snippets

Programmatic Navigation with useNavigate Hook

Illustrate using the `useNavigate` hook for navigating to a different route programmatically in response to user actions.
import { useNavigate } from 'react-router-dom';

function MyComponent() {
  // Initialization of the useNavigate hook
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate('/about')}>Go to About Page</button>
  );
}
This code snippet demonstrates how to use the useNavigate hook from React Router for programmatic navigation. By clicking the button, users will be navigated to the '/about' route.