Proposal: Remove `children` prop, add prop about when to render

I’d like to change how Route render and children work.

What’s the difference between them?

<Route path="/foo" children={() => (
  <div>Children always renders, match or miss.</div>
)}>

<Route path="/foo" render={() => (
  <div>Render only renders if there's a match, null if miss</div>
)}>

The API isn’t instructive

The API is not instructive of behavior at all: “render” doesn’t indicate “only renders when there’s a match” and children doesn’t indicate anything either.

Maybe we can ditch having two render props with a prop that is instructive of the behavior.

<Route alwaysRender={true} render={({ match }) => (
  <div>Now we only have one render prop, and an instructive API</div>
)}/>

I’m pretty convinced this is a good way forward. Route has two types of props:

• How should I match? (path, exact, strict)
• How should I render? (render, children, component)

It’s a bit conflated that the distinction between render and children is how things match!

Component prop

Also, with this change the component prop can participate in use-cases where you want to render even when there’s no match. Today you have to use the children prop.

<Route children={(props) => <OtherThing {...props} />}/>
// becomes this when the use case for the route changes:
<Route alwaysRender={true} component={OtherThing}/>

Bikeshedding on the name of the prop

<Route alwaysRender={false} render={() => ()}/>
<Route renderOnMiss={false} render={() => ()}/>
<Route renderOnMatchOnly={true} render={() => ()}/>
<Route renderOn={"match" || "miss" || "both"} render={() => ()}/>
<Route ignoreMatch={false} render={() => ()}/>

Thoughts?

[approots]

Would rather not have potential props conflict confusion:

<Route renderAlways={() => ()} renderMiss={() => ()}/>`
<Route always miss render={() => ()} />

So I’d prefer the @edygar suggestion:

<Route when={'miss' | 'match' | 'always'} render={({ match, route }) => } />

And default to always and a match check could be made as suggested by @klzns

[insin]

Benefit of making it something which has to be true:

<Route always render={() => ()}/>