Sometimes, we want to pass custom props to router component in react-router v4.

In this article, we’ll look at how to pass custom props to router component in react-router v4.

How to pass custom props to router component in react-router v4?

To pass custom props to router component in react-router v4, we pass in the props to the route component directly.

For instance, we write

<Route path="/" exact render={(props) => <Home test="hi" {...props} />} />;

to add the Route component and set its render prop to a function that renders the Home component with the test props along with all the other props from the props parameter, which are spread into the component.

Conclusion

To pass custom props to router component in react-router v4, we pass in the props to the route component directly.