useNavigate useNavigate Imperative Navigation
Last updated: 2026-11-02
useNavigate useNavigate Imperative Navigation
useNavigate returns a navigate function: go to the home page after signing in, return to the list after a submit, bounce anonymous users to the login page - all these code-driven jumps use it. navigate(to) pushes forward, navigate(-1) goes back, and you can pass replace and state along. It is the imperative counterpart of Link and the tool of choice whenever the code, not the user, decides where to go next.
| Group | Routing & State Mgmt |
|---|---|
| Kind | Hook |
| Since | React Router 6.4 |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
import { useNavigate } from 'react-router-dom'
function LoginButton() {
const navigate = useNavigate()
return (
<button onClick={() => {
// Navigate after a successful login; replace leaves no history entry
navigate('/dashboard', { replace: true })
}}>Sign in</button>
)
}
// navigate(-1) is the browser back button
// navigate('/detail', { state: { from: 'home' } }) carries hidden state⚙️ Parameters
| to | The destination: a path string ('/home'), a number (-1 to go back) or an object of the form { pathname, search }. |
|---|---|
| options | The second argument: { replace: true } replaces the history entry, { state } carries data that does not show up in the address bar. |
Returns：Returns the navigate(to, options?) function: calling it triggers the jump; it renders no UI and only changes the route.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Clicking "Go to login" appends login to the history stack; "replace back home" overwrites the top entry without a trace; "Back" pops the stack and returns to the previous page - the push, replace and back behaviours of navigate (simulated demo).💡 Key Points
🏷️ More Routing & State
💡 Related Cases
📚 Related Tutorials
❓ FAQ
