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 usinguseLocation
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 👏 😉