CODEWITHSUNDEEP
reactjsfunctional-programminggatsbyhigher-order-components
WriterState
WriterState

Reputation: 369

Passing Properties with Higher Order Components

I'm confused about how the location object is being passed to my child function. It is never passed in manually and appears to be being passed in automatically.

Is this perhaps an enhancement of Reach Router?

I'm using Gatsby.

Higher Order Component: 

const PrivateRoute = ({ component: Component, location, ...rest }) => {
  return (
    <div>
      <h5>{location.pathname}</h5>
      <Component {...rest} />
    </div>
  )
}

Where it is Used: 

  <Layout>
    <Router>
      <PrivateRoute path="/app/authorize" component={authContent} />
    </Router>
  </Layout>
)

Child Component: 

const authContent = ({ ...rest }) => (
  <div>
    <h1> {rest.name}</h1>
    <h1>Hello World</h1>
  </div>
)

Upvotes: 0

Views: 209

Answers (1)

Domino987
Domino987

Reputation: 8774

There actually there props passed into the child components of the routes:

history to enable Routing.

match to access URL parameters

And location to access the current location.

The HOC simply adds these in its render function as additional props.

Hope the helps. Happy coding.

Upvotes: 2

Related Questions