Categories
React Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *