27) Hooks in React Routing

useNavigate → Programmatic Navigation
Used to redirect users via code

import { useNavigate } from "react-router-dom";

const Login = () => {
  const navigate = useNavigate();

  const handleLogin = () => {
    navigate("/dashboard");
  };

  return <button onClick={handleLogin}>Login</button>;
}

i) Redirect after login/logout
ii) Navigation after API calls
iii) Back/forward navigation

navigate(-1); // go back

useParams → Access Route Parameters
Used to get dynamic values from URL

import { useParams } from "react-router-dom";

const User = () => {
  const { id } = useParams();
  return <h2>User ID: {id}</h2>;
}

<Route path="/user/:id" element={<User />} />

useLocation → Access Current URL Info
Gives details about current route,
i) pathname
ii) search (query params)
iii) state

import { useLocation } from "react-router-dom";

const Page = () => {
  const location = useLocation();

  console.log(location.pathname); // /about
  console.log(location.search);   // ?id=10
}

navigate("/profile", { state: { name: "Rahul" } });

const location = useLocation();
console.log(location.state.name);

useMatch → Match Current Route
Used to check if a route matches a pattern.

import { useMatch } from "react-router-dom";

const match = useMatch("/users/:id");

console.log(match);

i) Custom active link logic
ii) Conditional rendering

useRoutes → Define Routes as Config
Instead of JSX, define routes using objects,

import { useRoutes } from "react-router-dom";

const App = () => {
  const routes = useRoutes([
    { path: "/", element: <Home /> },
    { path: "/about", element: <About /> }
  ]);

  return routes;
}

i) Large applications
ii) Dynamic route configs

useResolvedPath → Resolve Relative Paths
Helps resolve relative navigation paths.

import { useResolvedPath } from "react-router-dom";

const resolved = useResolvedPath("../about");
console.log(resolved.pathname);

i) Nested routing
ii) Breadcrumbs

useNavigationType → Navigation Action
Tells how navigation happened

import { useNavigationType } from "react-router-dom";

const type = useNavigationType();

console.log(type); // "PUSH", "POP", "REPLACE"

i) Analytics tracking
ii) Debugging navigation

useOutlet → Render Nested Routes
Used in layout components

import { useOutlet } from "react-router-dom";

const Dashboard = () => {
  const outlet = useOutlet();

  return (
    <div>
      <h1>Dashboard</h1>
      {outlet}
    </div>
  );
}

useSearchParams → Query Parameters
Used to read/update query params

import { useSearchParams } from "react-router-dom";

const Page = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const id = searchParams.get("id");

  return <h2>ID: {id}</h2>;
}

Update query param

setSearchParams({ id: 20 });