How to Use UseMatch React Router For Better Routing

Using React Router requires a good understanding of routing. The useMatch hook in React Router is what determines if the current URL matches a path.

This blog will show you how to use the useMatch React Router feature for dynamic and nested routing and a smooth user experience.

Also you will learn route matches, current route, route path and how the match object helps extract params from the URL. With a practical implementation focus, this blog will show you how to use the useMatch hook in different parts of your React app.

What is useMatch Hook in React Router?

The useMatch hook in React Router checks if the current URL aligns with a given route path and returns a match object with valuable properties. It helps developers handle dynamic routes, extract parameters, and control how components render based on the current route.

Key Features of useMatch Hook

• Returns an object when the current route matches the provided route path.

• Works with nested routes to determine relative matches.

• Extracts dynamic parameters from the current URL.

• Helps in conditional rendering of components based on route matches.

• Returns null if the current URL does not match the provided path.

How useMatch Works in React Router

Basic Syntax of useMatch Hook

The useMatch hook requires a route path as an argument and returns a match object if a match is found.

1import { useMatch } from "react-router-dom";
2
3const MyComponent = () => {
4  const match = useMatch("/user/:id");
5
6  return (
7    <div>
8      {match ? <p>Matched User ID: {match.params.id}</p> : <p>No Match Found</p>}
9    </div>
10  );
11};

​

Understanding the Match Object

When a current route matches the provided path, the match object includes:

• pathname: The matched URL.

• params: An object containing key-value pairs of parameters from the route path.

• pattern: Defines the structure of the matched path.

If there is no match, the hook returns null.

useMatch Hook vs useRouteMatch Hook

The useMatch hook replaces useRouteMatch , which was used in previous versions of React Router DOM. Here’s a comparison:

Feature	useMatch (v6+)	useRouteMatch (v5)
Returns match object	✅ Yes	✅ Yes
Requires explicit route path	✅ Yes	❌ No (auto-detects)
Supports relative paths	✅ Yes	❌ No
Works with nested routes	✅ Yes	✅ Yes
Returns null for no match	✅ Yes	❌ No (returns false)

Using useMatch Hook in Functional Components

1. Matching a Static Route

The useMatch hook detects when a current URL aligns with a defined route path.

1import { useMatch } from "react-router-dom";
2
3const HomePage = () => {
4  const match = useMatch("/home");
5
6  return (
7    <div>
8      {match ? <h1>Welcome to the Home Page</h1> : <h1>Not on Home Page</h1>}
9    </div>
10  );
11};

​

2. Handling Dynamic Routes

For dynamic routes, parameters can be extracted from the match object.

1import { useMatch } from "react-router-dom";
2
3const UserProfile = () => {
4  const match = useMatch("/user/:userId");
5
6  return (
7    <div>
8      {match ? <p>User ID: {match.params.userId}</p> : <p>No User Found</p>}
9    </div>
10  );
11};

​

3. Working with Nested Routes

The useMatch hook works effectively with nested routes by determining relative matches.

1import { Routes, Route, useMatch } from "react-router-dom";
2
3const Dashboard = () => {
4  const match = useMatch("/dashboard");
5
6  return (
7    <div>
8      <h1>Dashboard</h1>
9      {match && <p>Inside Dashboard</p>}
10    </div>
11  );
12};
13
14const AppComponent = () => (
15  <Routes>
16    <Route path="/dashboard/*" element={<Dashboard />} />
17  </Routes>
18);

​

Extracting Parameters from useMatch Hook

Accessing Route Parameters

The params object from the match object allows extracting values from dynamic routes.

1const ProductPage = () => {
2  const match = useMatch("/product/:productId");
3
4  if (match) {
5    return <h1>Product ID: {match.params.productId}</h1>;
6  }
7
8  return <h1>Product Not Found</h1>;
9};

​

Handling Falsy Matches

When the current route does not match, useMatch returns null. This can be handled with conditional checks.

1const BlogPage = () => {
2  const match = useMatch("/blog/:id");
3
4  return (
5    <div>
6      {match ? <p>Viewing Blog ID: {match.params.id}</p> : <p>No Blog Found</p>}
7    </div>
8  );
9};

​

Practical Example: Conditional Rendering with useMatch Hook

1import { Routes, Route, useMatch } from "react-router-dom";
2
3const Sidebar = () => {
4  const match = useMatch("/dashboard");
5
6  return (
7    <nav>
8      {match ? <p>Sidebar visible on Dashboard</p> : <p>Sidebar hidden</p>}
9    </nav>
10  );
11};
12
13const Dashboard = () => <h1>Dashboard Page</h1>;
14const HomePage = () => <h1>Home Page</h1>;
15
16const App = () => (
17  <Routes>
18    <Route path="/" element={<HomePage />} />
19    <Route path="/dashboard" element={<Dashboard />} />
20    <Sidebar />
21  </Routes>
22);

​

When to Use useMatch Hook

The useMatch hook is useful for:

• Checking if the current URL matches a specified route path.

• Extracting parameters from dynamic routes.

• Rendering components conditionally based on route matches.

• Handling nested routes in React Router DOM.

Wrapping Up with useMatch React Router

The useMatch React Router hook makes matching easier. It helps extract params, manage nested routes and check the current location without the hassle.

By understanding the match object, route path and URL you can create better navigation in your React projects. This hook simplifies the routing logic so you can handle dynamic paths in functional components.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.