Not proper props.children value when none of the children routes match within the parent component

Version

4.1.1

Test Case

https://codesandbox.io/s/98m413nxqo

Steps to reproduce

Add a nested route is a component with Switch or multiple Route components within. Now navigate to the nested route but in a such way that none of the children routes will match.

In More details:

Parent Component A which is rendered on route /admin has multiple children routes: /admin/details, /admin/home. If /admin/donotexist is called then Component A will have its props.children resolved to an array of Route React components

Expected Behavior

In case when none of the child routes matched you expect to see props.children to be null.

Actual Behavior

In case when none of the child routes marched it is either Switch component or an array of Route components.

[timdorr]

I’m not sure what you’re doing differently, but that’s not what I see:

[anvk]

So for those who is still looking for a solution to this problem. This is a kinda way I managed to solve this in react-router v4.

So for the old v2 code:

<Route path="customers" component={AdminManageCustomersPage}>
    <Route path=":userId">
        <Route path="details" component={AdminManageCustomersDetail} />
        <Route path="address-books" component={AdminManageCustomersAddressBooks} />
    </Route>
</Route>

I converted into the following code:

const AdminManageCustomerRoutes = ({ match }) =>
  <AdminManageCustomersPage>
    <Switch>
      <Route path={`${match.url}/:userId/details`} component={AdminManageCustomersDetail} />
      <Route path={`${match.url}/:userId/address-books`} component={AdminManageCustomersAddressBooks} />
    </Switch>
  </AdminManageCustomersPage>;

...
<Switch>
  ...
  <Route exact path='/customers' component={AdminManageCustomersPage} />
  <Route path='/customers' component={AdminManageCustomerRoutes} />
  ...
</Switch>