How to Pass Props to a Child Component via React Router

In this blog post, we will discuss different ways to pass props to a child component via React Router. It is important to note that while there are many solutions available, some of them may be outdated.

The simplest solution involves adding the props directly to the Route wrapper component. Here is an example:

1
2
3

const Index = (props) => <h1>{props.route.something}</h1>;

const routes = <Route path="/" something={'here'} component={Index} />;

However, with this approach, you need to modify how you access the props by using this.props.route.* instead of the usual this.props, which might not be ideal in some cases.

To overcome this limitation, you can use the render method to pass props to the child component. Here is an alternative approach:

1
2
3

const Index = (props) => <h1>{props.something}</h1>;

<Route path="/" render={() => <Index something={'here'} />} />;

By using the render method, you can directly pass the props to the child component without the need to modify how you access them. This provides a more convenient and readable way to work with props in the child component.

And there you have it! These are two simple ways to pass props to a child component via React Router. Choose the approach that best suits your needs and enjoy building your React applications!

tags: [“React Router”, “props”, “child component”]