React Router: Passing Props to Handler Component

React Router is a powerful library that allows you to handle routing in your React applications. One common requirement when using React Router is to pass props to the handler component. In this blog post, we will explore different ways to achieve this.

1. Using the render prop

The render prop in React Router allows you to render a component inline, giving you the flexibility to pass props to it.

Here’s an example:

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

const MyComponent = ({ name }) => {
  return 
Hello, {name}!
;
};

const App = () => {
  return (
    
       }
      />
    
  );
};

export default App;

In the above example, we are passing the prop name with the value “John” to the MyComponent component using the render prop of the Route component.

2. Using the component prop

Another way to pass props to the handler component is by using the component prop of the Route component.

Here’s an example:

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

const MyComponent = ({ name }) => {
  return 
Hello, {name}!
;
};

const App = () => {
  return (
    
       }
      />
    
  );
};

export default App;

In this example, we are passing the prop name with the value “John” to the MyComponent component using the component prop of the Route component.

3. Using the withRouter higher-order component

If you are using a functional component or a component that is not directly rendered by a Route component, you can use the withRouter higher-order component from React Router to access the router props.

Here’s an example:

import React from 'react';
import { withRouter } from 'react-router-dom';

const MyComponent = ({ name }) => {
  return 
Hello, {name}!
;
};

const MyComponentWithRouter = withRouter(MyComponent);

const App = () => {
  return ;
};

export default App;

In this example, we are using the withRouter higher-order component to wrap the MyComponent component, which allows us to access the router props like history, location, and match.

These are three different ways to pass props to the handler component in React Router. Choose the one that best suits your needs and enjoy the flexibility of React Router in your applications!

Final Output:

<

pre>

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

const MyComponent = ({ name }) => {
  return 
Hello, {name}!
;
};

const App = () => {
  return (
    
       }
      />
    
  );
};

export default App;