React Router v4 HOC with render props

Question

I want to pass a props and declare a HOC in my route for authentification

Currently, I use

<Route exact path="/add" component={requireAuth(Add)} />

and it is working but without props.

I believe to pass a props you need to use the render syntax like this

<Route exact path="/add" render={props => <Add {...props} type="MyProp" />}/>

But is there any way to pass a HOC here?

Thanks!

Answer 1

Yes, you can . assign a capitalized variable to requireAuth(Add) .

const AuthAdd = requireAuth(Add);
<Route
  exact
  path="/add"
  render={props => <AuthAdd {...props} type="MyProp" />}
/>;

Answer 2

Use withRouter .

<Route exact path="/add" component={withRouter(Add)} />

Inside your Add class you will then be able to access the router props.