What is the role of the match object in React Router v5 and how can it be accessed within a component

Question

Can i know What is the role of the match object in React Router v5, and how can it be accessed within a component?

Answer 1

In React Router v5, the match object contains information about how a route's path matched the current URL. It provides details like parameters, path, and URL.

How to Access match:

Route Component Props: Automatically passed as a prop to components rendered by <Route>.

<Route path="/users/:id" component={User} />

// Inside User component:

function User({ match }) {

  console.log(match.params.id);

}

useRouteMatch Hook: Access the closest parent's match object.

 

const match = useRouteMatch();

console.log(match.url);

withRouter HOC: Wraps a component to inject match as a prop.

export default withRouter(MyComponent);