Hey!

Tell me if this sounds familiar.

You built a login page in React. User fills in the details, clicks login, and — nothing happens. The page just sits there.

You wanted to send the user to the dashboard after login. But how?

You cannot just use a link — the user did not click anything. The redirect needs to happen from your code, based on logic.

That is exactly what useNavigate solves.

1. What Is useNavigate?

useNavigate is a hook from React Router.

It gives you a function that you can call to move the user to a different page — from inside your code, not from a link they click.

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

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

function handleClick () { navigate ( " /dashboard " ); }

return < button onClick = { handleClick } > Go to Dashboard </ button >; }

Enter fullscreen mode

Exit fullscreen mode

useNavigate() returns a function. You store it in navigate .…