Question regarding non-route children of <Switch/>

[matthewrobb]

I have discovered and found it very useful that any component that's a direct descendant of <Switch/> can carry route-like props and be treated like a route. I was curious if this is intentional or if it's something I should avoid? If this is functionality you all plan on continuing to support I would recommend adding documentation for it because it is VERY useful!

Anyway, loving v4, your wholeTeamShouldReceiveProps() 😛

[timdorr]

It's intentional, mainly because it's actually more of a hassle to check the type of every element before checking it's props. While intended for <Route> and <Redirect>, it's valid to use it for any other element with a path or from prop.

[matthewrobb]

The reason this turns out to be very helpful is because I have an inner/outer model for routing where at any given layer I want to do:

<Switch>
  <Subview path={`${this.props.path}/mount-path-1`} />
</Switch>

And then each subview defines it's sub-routes. It just works really nicely and if it is an intended feature it may be worth documenting.

[pshrmn]

It is not documented because while it works, it is not officially supported.

[timdorr]

This behavior could break in the future. There's no plans to explicitly break it, but we may need to at some point to support a refactor or other reasons. So, don't rely on it in the future. BTW, you can do this just as easily (and it's a little more explicit about what's going to happen):

<Switch>
  <Route path={`${this.props.path}/mount-path-1`} component={Subview}/>
</Switch>

[matthewrobb]

@timdorr But you cannot easily pass props to Subview in that case or render to it's children.

[timdorr]

<Switch>
  <Route path={`${this.props.path}/mount-path-1`} render={() => <Subview foo="bar"/>}/>
</Switch>