🚀
Routing

Programmatic Navigation

useNavigate Hook
💡 Programmatic navigation, EK, "AUTO-PILOT" jaisa hai — USER, KISI, LINK, PAR, CLICK, NAHI, KARTA, BALKI, CODE, (jaise, FORM, SUBMIT, SUCCESS, HONE, PAR) DECIDE, KARTA, hai, ki, USER, KO, KAHA, LE, JAANA, hai — jaise, EK, PILOT, AUTOMATICALLY, PLANE, KO, EK, NAYE, DESTINATION, PAR, REDIRECT, KAR, DE.

useNavigate() HOOK, EK, navigate FUNCTION, RETURN, KARTA, hai — navigate("/dashboard") CALL, KARNE, SE, PROGRAMMATICALLY, URL, CHANGE, HO, JAATI, hai, jaise, FORM, SUBMISSION, YA, LOGIN, SUCCESS, KE, BAAD.

navigate(-1), BROWSER, "BACK" BUTTON, KI, TARAH, KAAM, KARTA, hai. navigate("/login", { replace: true }), CURRENT, HISTORY, ENTRY, KO, REPLACE, KAR, DETA, hai (jaise, LOGIN, KE, BAAD, USER, "BACK" BUTTON, SE, LOGIN, PAGE, PAR, WAAPAS, NA, JAA, SAKE).

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

  async function handleSubmit(e) {
    e.preventDefault();
    const success = await login(credentials);
    if (success) {
      navigate("/dashboard", { replace: true });   // history mein, replace
    }
  }

  return <form onSubmit={handleSubmit}>...</form>;
}
🚀
Programmatic navigation, EK, "AUTO-PILOT" jaisa hai — USER, KISI, LINK, PAR, CLICK, NAHI, KARTA, BALKI, CODE, (jaise, FORM, SUBMIT, SUCCESS, HONE, PAR) DECIDE, KARTA, hai, ki, USER, KO, KAHA, LE, JAANA, hai — jaise, EK, PILOT, AUTOMATICALLY, PLANE, KO, EK, NAYE, DESTINATION, PAR, REDIRECT, KAR, DE.
1 / 2
⚡ Quick Recap
  • useNavigate() = navigate() function, RETURN karta hai, PROGRAMMATIC, redirect ke liye
  • navigate(-1) = browser back button, jaisa
  • { replace: true } = history entry, REPLACE, karta hai (back button, se, WAAPAS, NAHI, jaa sakte)
Is page mein (2 subtopics)

useLocation(), EK, OBJECT, RETURN, KARTA, hai, JISME, CURRENT, URL, KI, DETAILS, (pathname, search, hash, state) HOTI, HAIN — ANALYTICS, TRACKING, YA, CONDITIONAL, RENDERING, (jaise, "CURRENT, PAGE, KE, HISAAB, SE, DIFFERENT, HEADER") KE, LIYE, USEFUL.

const location = useLocation();
console.log(location.pathname);   // "/dashboard/settings"

navigate("/success", { state: { orderId: 123 } }), NAVIGATION, KE, SAATH, EXTRA, DATA, PASS, KAR, SAKTA, hai, JO, URL, MEIN, VISIBLE, NAHI, HOTA — DESTINATION, COMPONENT, MEIN, useLocation().state SE, ACCESS, KIYA, JA, SAKTA, hai.

💡Tip: State, via, navigation, KAAFI, hai, TEMPORARY, DATA, (jaise, "SUCCESS, MESSAGE") KE, LIYE — PAGE, REFRESH, PAR, YE, STATE, KHO, JAATI, hai.