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

[ryanflorence]

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?

[hunterc]

I agree that the difference between children prop and render is a little annoying.
Two things I like about your suggestion:

1. remove children and just use render for render function behavior
   This can be confusing and I like simplifying it to always be one prop.
2. add another "behavior prop" to tell Route to always render regardless of match
   Since the current api uses a prop to denote behavior, (strict, exact), I like the idea of having a prop that means "render regardless of match". I also like that this means the component={Component} pattern can exist for always render scenarios.

As far as naming, I like alwaysRender or a single word like always.

[edygar]

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

[kwelch]

Dropping children for the confusion makes sense. I like the idea of render and component essentially working the same with the main difference being inline. Lastly I think alwaysRender is the mostly intuitive.

[edygar]

Haha, new idea:

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

[klzns]

Why do you need the alwaysRender prop when there's the match param in the render function?

[jimthedev]

Like @edygar said but reverse the prop order in examples to read like a sentence:

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

[ryanflorence]

@klzns the first stab at the v4 API started that way but it was just way too inconvenient for every route to be checking "match" before rendering. You rarely need the "always render" behavior.

[timdorr]

Why not just merge the props together?

<Route renderAlways={() => ()}/>
<Route   renderMiss={() => ()}/>
<Route  renderMatch={() => ()}/>

[insin]

Benefit of making it something which has to be true:

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

[ryanflorence]

@timdorr

<Route    renderAlways={() => ()}/>
<Route      renderMiss={() => ()}/>
<Route     renderMatch={() => ()}/>
<Route componentAlways={Foo}/>
<Route   componentMiss={Foo}/>
<Route  componentMatch={Foo}/>

☹️

[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

[JulienPradet]

I like the core idea ! :)

For these kind of cases I usually go for a prop should... to match a bit with the React API. How about shouldRouteRender ?

And it would be nice if children was kept but deprecated for a smooth transition.

[cfenzo]

I like the idea of a always flag/boolean for the cases where you want to always render..
But if you do end up with a prop like when={'miss' | 'match' | 'always'}, please don't make always the default..

[HeyHugo]

Hm can't you already "always render" by just skip having path prop (and keeping it outside of <Switch>)?
Like this:

<Route component={SomeComponent}>
or 
<Route render={() => (<div>hello</div>)}>

The only thing I can think of that might not be easily done is rendering on the negation of path (render on any path except path matching X)

Edit:
Ah, disregard last part, rendering on negation of path can be done by using <Switch>

What is a good use case for: I want to render but not match
I can't come up with one.

[ryanflorence]

@HeyHugo

NavLinks:
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js#L27-L31

Custom Links:
https://reacttraining.com/react-router/web/example/custom-link

Animations:
https://reacttraining.com/react-router/web/example/animated-transitions