How to Add the Regex to Path in React Router

Shubham Vora Feb 02, 2024
How to Add the Regex to Path in React Router

In this article, we will learn to add the regex to the react-router paths. While creating the paths with the id or string requires validating the string from which we get the request.

The regular expressions allow us to validate the strings.

Use the react-router V4 to Add Regex to the Path

In React.js, we can create the different routes using the react-router library. For every route, we need to specify the paths, and we can add the regular expression in the path if the parameters we get in the path need to be validated.

In the example below, we have created three different routes. In the first and second routes, we added the regular expression to the path.

Also, we passed the exact={false} as a prop to disable the exact match for the Home component. So, when any route doesn’t match, we can redirect users to the Home route.

The first route will accept the string containing the numbers and letters, and the second will accept only numbers. If routes do not match perfectly, it will show the home page.

Example Code:

import * as React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
//  Different components
function Home() {
  return <h2>This is Home Page.</h2>;
}
function About() {
  return <h2>This is About Page.</h2>;
}
function UserDetails() {
  return <h2>This is User Details Page.</h2>;
}
export default function App() {
  return (
    <>
    {/* Router for different paths */}
      <Router>
        <Switch>
          {/* route = /user/id */}
          <Route
            path="/user/:id(0-9a-f]{8})?"
            component={UserDetails}
            exact={true}
          />
          {/* route = /id */}
          <Route path="/:id(\d+)" component={About} exact={true} />
          <Route path="/" component={Home} exact={false} />
        </Switch>
      </Router>
    </>
  );
}

Output:

When we go to the path like user/234edf43, it will show the UserDetails component.

User Details Page

If we go to the path like /1234, it will show the About component.

About Page

The path like /abcd12 will show the Home component as any other route is not matching.

Home Page

Also, users can change regular expressions according to requirements, and if the user finds that the regular expression is not working correctly, add the question mark at the end of the regular expression, as we have added in the first route.

Author: Shubham Vora
Shubham Vora avatar Shubham Vora avatar

Shubham is a software developer interested in learning and writing about various technologies. He loves to help people by sharing vast knowledge about modern technologies via different platforms such as the DelftStack.com website.

LinkedIn GitHub

Related Article - React Router