useRouteMatch Hook
Returns a match object that contains all the information like how the current URL matched with the Route path.
Properties:
- params: This is an object that contains the variable part of the URL.
- isExact: This is a boolean value, indicating whether the entire URL matched with the given Router path.
- path: A string that contains the path pattern.
- URL: A string that contains the matched portion of the URL. It can be used for nested <Link />s and <Route />s.
Syntax :
import { useRouteMatch } from "react-router-dom";
// Inside functional component
export default function SomeComponent(props) {
const match = useRouteMatch();
}
Example: The useRouterMatch hook can be used in creating nested Routes and Links. The following code renders the Profile page of the user when the current URL path entirely matches the given Route path, otherwise, it renders another Route that renders the User’s followers page when the current URL path is “profile/:userName/followers”.
Javascript
// Filename - Profile.jsimport { Link, Route, useParams, useRouteMatch,} from "react-router-dom";export default function Profile(props) { // useParams() returns an object of the parameters // defined in the url of the page // For example, the path given in the Route component // consists of an "userName" parameter // in this form ---> "/profile/:userName" const { userName } = useParams(); const match = useRouteMatch(); return ( <div> {match.isExact ? ( <div> <h1> Profile of {userName}</h1> <p> {" "} This is the profile page of{" "} {userName} </p> <Link to={`${match.url}/followers`}> Followers </Link> </div> ) : ( <Route path={`${match.url}/followers`}> <div>My followers</div> </Route> )} </div> );} |
Output:
If you click the follower’s link, you will be redirected to the “/profile/John/followers” page, and as the entire URL path “profile/John/followers” does not match the given Route path i.e. “profile/;userName”, so the div element inside the Route component gets rendered.
Remember You need to have React 16.8 or higher in order to use these react-router hooks. Also, don’t forget to use them inside functional components.
React-Router Hooks
React-Router is a popular React library that is heavily used for client-side routing and offers single-page routing. It provides various Component APIs( like Route, Link, Switch, etc.) that you can use in your React application to render different components based on the URL pathnames on a single page.
Contact Us