Menu

Post image 1
Post image 2
1 / 2
0

useNavigate in React — Explained Simply with Real Examples

DEV Community·DHANRAJ S·28 days ago
#bnaQT580
Reading 0:00
15s threshold

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 . Then you call navigate("/path") whenever you want to go somewhere.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More