5 React Router hooks you should know

1. useParams

useParams is used to get the get the parameters from the url. You can use :parametername to represent the parameter in the url.

Router.jsx

<Route path="about/:id" element={<About />} />

About.jsx

import { useParams } from 'react-router-dom';
export default function About() {
    const { id } = useParams()
    return (
        <>
            <p>The url parameter is {id}</p>
        </>
    )
}

2. useLocation

useLocation provides you the complete info about the location. You can also get the parameters of the url using useLocation hook.

In the below Home.jsx, I am redirecting to the location url along with state, url parameter, searchparams and hashparams.

Home.jsx

const [name, setName] = useState('Sujith')
return (
    <>
        <Link
            to={
                `location/23423?id=searchparams/#/searchparams`
            }
            state={{ name }}
        >Redirect</Link>
    </>
)

If you click on the redirect, It will be redirected to the below link,

http://localhost:3000/location/23423?id=searchparams/#/searchparams

Location.jsx

import { useLocation } from 'react-router-dom';
export default function Location() {
    let { pathname, search, hash, state, key } = useLocation();
    return (
        <>
            <p>The location is {pathname}</p>
        </>
    )
}

If you use useLocation, You will be getting the following details in the object,

{
    "pathname": "/location/23423",
    "search": "?id=searchparams/",
    "hash": "#/searchparams",
    "state": {
        "name": "Sujith"
    },
    "key": "5v0cy5ld"
}

3. useNavigate

useNavigate is used to redirect programatically to another location.

Home.jsx

import { useNavigate } from 'react-router-dom'
export default function Home() {
    let navigate = useNavigate();
    const navigatetolink = () => {
        navigate("about", { replace: true });
    }
    return (
        <>
            <p onClick={navigatetolink}>Navigate</p>
        </>
    )
}

It will navigate to /about page.

4. useRoutes

The useRoutes hook is the functional equivalent of <Routes> and it uses JavaScript objects instead of <Route> elements to define your routes.

App.js

import './App.css';
import { useRoutes } from 'react-router-dom';
import Layout from './Components/Layout';
import Home from './Components/Home';
import About from './Components/About';
function App() {
  let routes = useRoutes([
    {
      element: <Layout />,
      children: [
        {
          path: "",
          element: <Home />,
        },
        { path: "/about", element: <About /> },
      ],
    },
  ]);
  return routes;
}
export default App;

Layout.jsx

import { Outlet, Link } from 'react-router-dom'
export default function Layout() {
    return (
        <>
            <div className="navbar">
                <Link to="">Home</Link>
                <Link to="about">About</Link>
            </div>
            <Outlet />
        </>
    )
}

Home.jsx

export default function Home() {
    return (
        <>
            <p>Home</p>
        </>
    )
}

About.jsx

export default function About() {
    return (
        <>
            <p>About</p>
        </>
    )
}

5. useSearchParams

useSearchParams can be used to set and get query params in the url.

Home.jsx

import { useEffect } from "react";
import { createSearchParams, useSearchParams } from "react-router-dom";
export default function Home() {
    let [searchParams, setSearchParams] = useSearchParams();
    useEffect(() => {
        setSearchParams(
            createSearchParams({ name: "Sujith" })
        );
    }, [])
    return (
        <>
            <p>Home {searchParams.get("name")}</p>
        </>
    )
}

Thank you !!

If you find the post useful, give me some claps 👏 😉

Also check:

React Router Dom V6 — An Overview