# 27) Hooks in React Routing

1.  **<mark class="bg-yellow-200 dark:bg-yellow-500/30">useNavigate → Programmatic Navigation</mark>**  
    Used to redirect users via code
    
    ```javascript
    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
    
    ```javascript
    navigate(-1); // go back
    ```
    
2.  **<mark class="bg-yellow-200 dark:bg-yellow-500/30">useParams → Access Route Parameters</mark>**  
    Used to get **dynamic values from URL**
    
    ```javascript
    import { useParams } from "react-router-dom";
    
    const User = () => {
      const { id } = useParams();
      return <h2>User ID: {id}</h2>;
    }
    ```
    
    ```javascript
    <Route path="/user/:id" element={<User />} />
    ```
    
3.  **<mark class="bg-yellow-200 dark:bg-yellow-500/30">useLocation → Access Current URL Info</mark>**  
    Gives details about current route,  
    i) pathname  
    ii) search (query params)  
    iii) state
    
    ```javascript
    import { useLocation } from "react-router-dom";
    
    const Page = () => {
      const location = useLocation();
    
      console.log(location.pathname); // /about
      console.log(location.search);   // ?id=10
    }
    ```
    
    ```javascript
    navigate("/profile", { state: { name: "Rahul" } });
    
    const location = useLocation();
    console.log(location.state.name);
    ```
    
4.  **<mark class="bg-yellow-200 dark:bg-yellow-500/30">useMatch → Match Current Route</mark>**  
    Used to check if a route matches a pattern.
    
    ```javascript
    import { useMatch } from "react-router-dom";
    
    const match = useMatch("/users/:id");
    
    console.log(match);
    ```
    
    i) Custom active link logic  
    ii) Conditional rendering
    
5.  **<mark class="bg-yellow-200 dark:bg-yellow-500/30">useRoutes → Define Routes as Config</mark>**  
    Instead of JSX, define routes using objects,
    
    ```javascript
    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
    
6.  **<mark class="bg-yellow-200 dark:bg-yellow-500/30">useResolvedPath → Resolve Relative Paths</mark>**  
    Helps resolve relative navigation paths.
    
    ```javascript
    import { useResolvedPath } from "react-router-dom";
    
    const resolved = useResolvedPath("../about");
    console.log(resolved.pathname);
    ```
    
    i) Nested routing  
    ii) Breadcrumbs
    
7.  **<mark class="bg-yellow-200 dark:bg-yellow-500/30">useNavigationType → Navigation Action</mark>**  
    Tells how navigation happened
    
    ```javascript
    import { useNavigationType } from "react-router-dom";
    
    const type = useNavigationType();
    
    console.log(type); // "PUSH", "POP", "REPLACE"
    ```
    
    i) Analytics tracking  
    ii) Debugging navigation
    
8.  **<mark class="bg-yellow-200 dark:bg-yellow-500/30">useOutlet → Render Nested Routes</mark>**  
    Used in layout components
    
    ```javascript
    import { useOutlet } from "react-router-dom";
    
    const Dashboard = () => {
      const outlet = useOutlet();
    
      return (
        <div>
          <h1>Dashboard</h1>
          {outlet}
        </div>
      );
    }
    ```
    
9.  **<mark class="bg-yellow-200 dark:bg-yellow-500/30">useSearchParams → Query Parameters</mark>**  
    Used to read/update query params
    
    ```javascript
    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
    
    ```javascript
    setSearchParams({ id: 20 });
    ```