Programmatic तरीके से Navigation
In this page:
const navigate = useNavigate();
navigate("/path");
navigate("/path", { replace: true });
navigate(-1); // go backएक Click की जगह एक Action के बाद Navigate करना
कभी-कभी navigation को code run होने के result के रूप में होना चाहिए, जैसे एक successful form submission के बाद redirect करना, user द्वारा directly एक Link click करने के बजाय।
useNavigate() hook एक function return करता है जिसे आप किसी भी event handler या effect के अंदर से call करके वह navigation trigger कर सकते हैं।
उदाहरण: Navigating After an Action, Not a Click
// Run in your local React project (npm install required)
import { useNavigate } from 'react-router-dom';
function LoginForm() {
const navigate = useNavigate();
const handleSubmit = e => {
e.preventDefault();
navigate('/dashboard');
};
return <form onSubmit={handleSubmit}><button type="submit">Log In</button></form>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
navigate(-1) के साथ Back जाना
navigate को एक negative number pass करना browser के back button की तरह act करता है, history में इतने steps पीछे move करते हुए। navigate(-1) एक page पीछे जाता है, एक Cancel या Back button के natural behavior को mimic करते हुए।
उदाहरण: Going Back with navigate(-1)
// Run in your local React project (npm install required)
import { useNavigate } from 'react-router-dom';
function BackButton() {
const navigate = useNavigate();
return <button onClick={() => navigate(-1)}>Go Back</button>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Push करने के बजाय History Replace करना
Default रूप से, navigate('/path') browser history में एक नई entry जोड़ता है, इसलिए back button previous page पर return करता है। दूसरे argument के रूप में { replace: true } pass करना इसके बजाय current entry swap कर देता है, जो एक login redirect के बाद useful है ताकि back button login form पर return न हो।
उदाहरण: Replacing History Instead of Pushing
// Run in your local React project (npm install required)
import { useNavigate } from 'react-router-dom';
function LoginForm() {
const navigate = useNavigate();
const handleSubmit = e => {
e.preventDefault();
navigate('/dashboard', { replace: true });
};
return <form onSubmit={handleSubmit}><button type="submit">Log In</button></form>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- पुराने useHistory hook का उपयोग करने की कोशिश करना, जो React Router v6 में useNavigate के favor में हटाया गया।
- useNavigate() को एक component के बाहर call करना जो एक BrowserRouter के अंदर rendered नहीं है।
- यह भूल जाना कि navigate('/path') default रूप से browser history में जोड़ता है — अगर आप इसके बजाय replace करना चाहें तो { replace: true } उपयोग करें।
- useNavigate() एक function return करता है जिसे आप event handlers या effects के अंदर से routes बदलने के लिए call करते हैं।
- navigate('/path') browser history पर एक नई entry push करता है, एक Link click करने जैसा ही।
- navigate(-1) history में एक step पीछे जाता है, browser के back button जैसा।
- दूसरे argument के रूप में { replace: true } current history entry replace करता है एक नई जोड़ने के बजाय।
npm install react-router-dom (v6 useNavigate) चाहिए — इस sandbox में CDN से available नहीं; v5 इसके बजाय useHistory उपयोग करता था।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: