Yesterday I was working with URL state using React Router, and today I explored another very useful concept — useNavigate.
This is not a long recap, but a short exploration blog because this hook changed how I think about navigation inside a React app.
What is useNavigate?
useNavigate is a React Router hook that allows us to navigate between pages programmatically — without using <Link> components.
In simple words:
- No button wrapped in
<Link> - No anchor tags
- Just logic → then navigation
This is extremely helpful when navigation depends on conditions, form submissions, or user actions.
Why It Felt Interesting
Before this, I mostly navigated using links.
But useNavigate showed me that navigation doesn’t always have to be visual — it can be logical.
For example:
- After login → redirect to dashboard
- After form submit → go to success page
- After clicking a custom element → move to another route
This gives much more control over the user flow.
Basic Idea
You create a navigate function and call it whenever needed:
- On button click
- Inside a function
- After validation
- Even inside effects
It feels very similar to calling a normal function, but instead of changing state, you are changing the route.
What I’ve Learned So Far in React Router
Up to this point, I’ve explored:
-
useParams– Reading data from URL -
useSearchParams– Reading + updating query data -
useNavigate– Navigating without links - Plus concepts like Nested Routes, Index Routes, and Routing structure
Each hook adds a new layer of understanding about how SPAs actually behave.
What’s Next
This is not a weekly recap — just a short learning checkpoint.
For now, I’m planning to pause the current project slightly and focus more deeply on:
- Context API
- Advanced State Management
After strengthening these concepts, I’ll return and apply everything more effectively in my main project.
Small hooks like useNavigate may look simple, but they quietly change how you design application flow.
It’s not just routing — it’s controlling user movement through logic instead of links.
Top comments (1)
This is a great way to frame useNavigate. The shift from “clicking links” to “navigation as logic” is a big mental unlock in React Router. Once you start using it after auth checks or form flows, app structure feels way more intentional. Solid learning checkpoint 👌