-2

When we are using the render prop, why do we have to specify the component prop as:

component: Component

All the other props use the regular destructured syntax:

exact

Is this specific to React Router DOM, or is this generally how you pass components in React? If so, why do we have to use this syntax?

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Ken
  • 693
  • 1
  • 8
  • 14
  • 2
    Could you show an example with a little more _context_? Are you talking about https://reactrouter.com/web/api/Route/render-func? In that case the colon in `{ component: Component, ...rest }` is to effectively *rename* the `component` prop, see e.g. https://stackoverflow.com/q/51959013/3001761. – jonrsharpe Mar 30 '21 at 16:45
  • Thanks for that, that was the function I was referring to. Do you know why we have to rename the component prop? – Ken Mar 30 '21 at 22:14
  • 1
    Because it's being used in JSX. If you put `` that is interpretered as a string, `React.createElement("component")`, whereas `` is interpreted as an *identifier*, `React.createElement(Component)`. – jonrsharpe Mar 30 '21 at 23:02

1 Answers1

1

I believe the reasoning here is due to the fact that React Router serves less as a parent component and more as a redirection library. Plugging your component into the component proceeds with a standard render where the query string, history and params are injected; However, this isn't the only option.

<Route path={this.props.match.url} exact render={() => 
   <Admin location={this.props.location} history={this.props.history}/>
}/>

The purpose of the Route is not to apply styling, props, or generic parent attributes, but rather to exclusively render the children with the injected props and path conditionals.

Nicholas Dullam
  • 291
  • 1
  • 9