react-router v4 nesting `Match` inside `Miss`

Question

Having an issue when transitioning between matches nested inside a miss. Below is a minimal example. To reproduce the behavior transition between /adapters and /users. Depending on where you start one of them will not render. However the logs always appear in the console.

Am I not using Miss correctly or is this a bug?

codepen: http://codepen.io/slightlytyler/pen/wgzbRE

Root.js

import React from 'react';
import { BrowserRouter, Link, Match, Miss } from 'react-router';

const Root = () => (
  <BrowserRouter>
    <div>
      <Link to="/auth">Auth</Link>
      <Link to="/adapters">Adapters</Link>
      <Link to="/users">Users</Link>
      <Match
        pattern="/auth"
        render={() => <div>auth</div>}
      />
      <Miss
        render={() => (
          <div className="app-layout">
            App Layout
            <Match
              pattern="/adapters"
              render={() => {
                console.log('render adapters');
                return <div>Adapters</div>;
              }}
            />
            <Match
              pattern="/users"
              render={() => {
                console.log('render users');
                return <div>Users</div>;
              }}
            />
          </div>
        )}
      />
    </div>
  </BrowserRouter>
);

export default Root;

Answer 1

Ok so the answer is that react-router v4.0.0-alpha.6 is broken. I've switched to using master as well as the new API and have gotten my code to work as expected. Here is how I accomplished my problem.

Root.js

import React from 'react';
import { BrowserRouter, Link, Route, Switch } from 'react-router';

const Root = () => (
  <BrowserRouter>
    <div>
      <Link to="/auth">Auth</Link>
      <Link to="/adapters">Adapters</Link>
      <Link to="/users">Users</Link>
      <Switch>
        <Route
          path="/auth"
          render={() => <div>auth</div>}
        />
        <Route
          render={() => (
            <div className="app-layout">
              App Layout
              <Route
                path="/adapters"
                render={() => {
                  console.log('render adapters');
                  return <div>Adapters</div>;
                }}
              />
              <Route
                path="/users"
                render={() => {
                  console.log('render users');
                  return <div>Users</div>;
                }}
              />
            </div>
          )}
        />
      </Switch>
    </div>
  </BrowserRouter>
);

export default Root;