SamwithCode

Helper function in React Router 2025

Helper Function in React Router 2025

React Router v6.4+ introduced several helper functions that simplify routing logic and improve developer experience. Here are the most useful ones with examples:

1. useNavigate()

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

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

  const goToAbout = () => {
    navigate("/about");
  };

  return (
    
  );
}

2. useParams()

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

function UserDetail() {
  const { userId } = useParams();

  return 
User ID: {userId}
;
}

3. useLocation()

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

function ShowLocation() {
  const location = useLocation();

  return 
{JSON.stringify(location, null, 2)}
;
}

4. useSearchParams()

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

function SearchComponent() {
  const [searchParams] = useSearchParams();
  const keyword = searchParams.get("q");

  return 
Searched for: {keyword}
;
}

Summary

These hooks allow you to programmatically navigate, read parameters, handle query strings, and inspect location in your React Router apps.