How to pass props to component with <Route/>

In this post I will show you small trick. If you are working with <Route/> component from React Router then you know that you can render component in the three way.

You can use next methods:

  • component
  • render
  • children

In first example we are using method component for rendering react component Example. With component method we can’t pass props to our component Example.

If you want to pass props then we have convenient way to do it with method render.

Render method expects function as parameter. Take a look on example below.

We added function and our function should return some JSX or Example component. In our example we will return component Example with two props varx and vary.

You can see that we used Arrow function.

In Example component props will be available:

Enjoy in react coding 🙂

You may also like...

Leave a Reply