CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
Murakami
Murakami

Reputation: 3760

React router render method with HOC

I'm trying to implemenent this logic inside react-router-dom (5.0.1). This is my route:

    <Route
      path="/available-days"
      render={props => isAdmin ? Auth(UserProfileView) : <Redirect to='/dashboard'/>}
      />

When idAdminis true it causes the error: Objects are not valid as a React child. I also tried this:

    <Route
      path="/available-days"
      render={props => isAdmin ? Auth(UserProfileView)({ ...props }) : <Redirect to='/dashboard'/>}
    />

Then I see TypeError: Object(...)(...) is not a function. Why I just cannot use HOC inside the render method and how can I make it work? Btw Auth(UserProfileView) works fine if put in component method.

Upvotes: 0

Views: 615

Answers (1)

Giang Le
Giang Le

Reputation: 7044

Don’t Use HOCs Inside the render Method, see here https://reactjs.org/docs/higher-order-components.html .

You can try

const UserProfileViewWithAuth = Auth(UserProfileView)

<Route
   path="/available-days"
   render={props => isAdmin ? <UserProfileViewWithAuth {...props} /> : <Redirect to='/dashboard'/>}
/>

Upvotes: 2

Related Questions