How to Use UseMatch in React Router For Better Routing

How does React handle routes based on the current URL? And what about nested routes?

These are common questions for developers working with React applications. The useMatch hook in React Router makes this process simple. It helps match routes dynamically, making navigation smoother.

This blog breaks down how useMatch works and how it improves routing in React apps. From handling dynamic paths to managing nested routes, this hook plays a key role in keeping things organized.

Let's walk through its features and see how it fits into real-world projects.

What is the useMatch Hook?

The useMatch hook is a powerful tool in React Router that enables you to determine if the current URL matches a particular path. It returns a match object or null if there is no match to the current location. This hook is particularly useful for conditionally rendering components or performing logic based on the matched path. By using useMatch, developers can create more dynamic and responsive applications that adapt to the current route matches.

Understanding the Match Object

The match object returned by the useMatch hook has several properties that provide valuable information about the current route. These properties include:

• params: The params object contains the dynamic segments of the path. For example, if you have a route like /users/:id, the params object will contain the id of the user.

• pathname: The pathname property represents the current URL path. It is useful for determining the exact path that the user is currently on.

• pathnameBase: The pathnameBase property represents the base path of the current URL. This is particularly useful when working with nested routes.

• pattern: The pattern property represents the path pattern that was matched. It provides insight into the structure of the route that was matched.

Using the useMatch Hook with React Router

The useMatch hook can be used with both static and dynamic routes. It supports parameterized paths and provides fine-grained control over routing behavior. For example, you can use the useMatch hook to extract parameters from the current URL and pass them to your components. This makes it easier to create dynamic and data-driven applications.

1import { useMatch } from 'react-router-dom';
2
3function UserComponent() {
4  const match = useMatch('/users/:id');
5  if (!match) return null;
6  const { id } = match.params;
7  return <div>User ID: {id}</div>;
8}

​

In this example, the useMatch hook is used to match the current URL against the path /users/:id. If there is a match, the params object is extracted, and the user ID is displayed. If there is no match, the component returns null.

Working with Dynamic Routes

Dynamic routes are essential for creating flexible and scalable applications. The useMatch hook supports dynamic segments in paths, allowing easy extraction of parameters for components. This is particularly useful when you need to render different data based on the current URL matches.

1function ProductComponent() {
2  const match = useMatch('/products/:category/:id');
3  if (!match) return null;
4  const { category, id } = match.params;
5  return <div>Product Category: {category}, Product ID: {id}</div>;
6}

​

In this example, the useMatch hook is used to match the current URL against the path /products/:category/:id. The params object contains the category and id of the product, which can be used to fetch and display the relevant data.

Implementing Dynamic Routing Logic

The useMatch hook can be used to implement dynamic routing logic based on the matched path. This is particularly useful when you need to conditionally render components or perform specific actions based on the current route matches.

1function DynamicRoutingComponent() {
2  const match = useMatch('/dashboard/:section');
3  if (!match) return null;
4  const { section } = match.params;
5  switch (section) {
6    case 'overview':
7      return <OverviewComponent />;
8    case 'settings':
9      return <SettingsComponent />;
10    default:
11      return <NotFoundComponent />;
12  }
13}

​

In this example, the useMatch hook is used to match the current URL against the path /dashboard/:section. Based on the value of the section parameter, different components are rendered. This allows for dynamic and context-specific rendering of components.

Conditionally Rendering Components

Conditional rendering is a common requirement in web applications. The useMatch hook can be used to conditionally render components based on the current URL matches. This is particularly useful when you need to display different content or components based on the current route.

1function ConditionalRenderingComponent() {
2  const match = useMatch('/profile/:userId');
3  if (!match) return null;
4  const { userId } = match.params;
5  return userId === '123' ? <AdminProfile /> : <UserProfile />;
6}

​

In this example, the useMatch hook is used to match the current URL against the path /profile/:userId. Based on the value of the userId parameter, different components are rendered. This allows for dynamic and context-specific rendering of components.

Working with Nested Routes

Nested routes are a common pattern in web applications. The useMatch hook can be used with nested routes to determine if the current URL matches a particular path. This is particularly useful when you need to implement breadcrumbs or other navigation components that rely on the current route matches.

1function NestedRoutesComponent() {
2  const match = useMatch('/parent/:parentId/child/:childId');
3  if (!match) return null;
4  const { parentId, childId } = match.params;
5  return (
6    <div>
7      <h1>Parent ID: {parentId}</h1>
8      <h2>Child ID: {childId}</h2>
9    </div>
10  );
11}

​

In this example, the useMatch hook is used to match the current URL against the path /parent/:parentId/child/:childId. The params object contains the parentId and childId, which can be used to display the relevant data.

Managing Breadcrumbs with useMatch

Breadcrumbs are a useful navigation aid that helps users understand their current location within the application. The useMatch hook can be used to implement breadcrumbs that reflect the current route matches.

1function BreadcrumbsComponent() {
2  const matches = useMatches();
3  return (
4    <nav>
5      {matches
6        .filter(match => match.pathnameBase !== '/')
7        .map((match, index) => (
8          <span key={index}>
9            {index > 0 && ' > '}
10            <a href={match.pathname}>{match.pathname}</a>
11          </span>
12        ))}
13    </nav>
14  );
15}

​

In this example, the useMatches hook is used to retrieve the current route matches. The matches are filtered and mapped to create a breadcrumb navigation component. This allows users to easily navigate through the application based on the current route.

Best Practices for useMatch Hook Implementation

When implementing the useMatch hook, it is important to follow best practices to ensure efficient and maintainable code. Here are some key considerations:

• Use with Caution: Use the useMatch hook with caution, as it can couple your application logic to React Router. Ensure that your routing logic is decoupled from your component logic to maintain flexibility.

• Parameterized Paths: Use the useMatch hook with parameterized paths to provide fine-grained control over routing behavior. This allows you to extract and use dynamic segments of the path efficiently.

• Nested Routes: Use the useMatch hook with nested routes to implement complex routing logic. This is particularly useful when you need to manage breadcrumbs or other navigation components that rely on the current route matches.

• useMatches Hook: Use the useMatch hook with the useMatches hook to retrieve the current route matches. Note that useMatches only works with a data router like createBrowserRouter, which knows the full route tree in advance. The useMatches hook is more concise and flexible compared to traditional methods of obtaining route matches in React Router.

Wrapping Up: Making the Most of useMatch

The useMatch hook helps React Router handle routes smoothly. It checks the current URL and matches it with a given pattern, making it easier to show the right components. With useMatch, developers can manage dynamic and nested routes without extra complexity.

This hook is useful for creating interactive and responsive applications. By understanding how it works, developers can improve navigation and control what users see based on the URL. Whether working on simple or complex routing, useMatch offers a straightforward way to manage routes effectively.

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.