Вложенные маршруты сопоставления с React Router v4 и MatchWithFade

Этот вопрос является продолжением этого:

Проблемы с React Router v4 и MatchWithFade

У меня есть еще один (потенциально глупый) вопрос об использовании MatchWithFade и React Router v4. То, что я хотел бы сделать, это иметь вложенные маршруты, поэтому компонент верхнего уровня может иметь это:

<MatchWithFade pattern='/one' component={One} />

... и тогда One может иметь это:

<Match pattern='/one/one' Component={OneOne} />

Это не кажется мне необычным паттерном (хотя, возможно, это так). В любом случае поведение, которое я наблюдаю, заключается в том, что, используя приведенный выше пример, если я загружаю OneOne, он монтируется, а затем немедленно вызывается componentWillUnmount. Если бы я угадал, я бы сказал, что TransitionMotion отслеживает (возможно, скрытый) экземпляр OneOne, и после завершения перехода он размонтирует этот скрытый компонент. Что касается основного пользовательского интерфейса, отображается OneOne. Однако, если componentWillUnmount выполняет какую-либо очистку (например, удаляет что-то из Redux), то, конечно же, это действие запускается, и все данные, связанные с OneOne, удаляются.

Вот полный пример, иллюстрирующий проблему:

import React, { Component } from 'react';
import BrowserRouter from 'react-router/BrowserRouter'

import { TransitionMotion, spring } from 'react-motion'
import Match from 'react-router/Match'
import Link from 'react-router/Link';

const styles = {
  fill: { position: 'absolute', top: 0, left: 0 }
};

const MatchWithFade = ({ component:Component, ...rest }) => {
  const willLeave = () => ({ zIndex: 1, opacity: spring(0) })

  return (
    <Match {...rest} children={({ matched, ...props }) => {
      return (
        <TransitionMotion
          willLeave={willLeave}
          styles={matched ? [ {
            key: props.location.pathname,
            style: { opacity: 1 },
            data: props
          } ] : []}
        >
          {interpolatedStyles => {
            return (
              <div>
                {interpolatedStyles.map(config => (
                  <div
                    key={config.key}
                    style={{...styles.fill, ...config.style }}>
                    <Component {...config.data}/>
                  </div>
                ))}
              </div>
            )
          }}
        </TransitionMotion>
      )
    }}/>
  )
}

const TwoOne = () => {
  return (
    <div>Two One</div>
  )
}


class TwoTwo extends Component {
  componentWillUnmount() {
    console.log("TwoTwo will unmount")
  }

  render () {
    return (
      <div>Two Two</div>
    )
  }
}


const TwoHome = () => {
  return (
    <div>Two Home</div>
  )
}


class One extends Component {
  componentWillUnmount () {
    console.log("ONE UNMOUNTING")
  }
  render () {
    return (
      <div style={{ width: 300, border: '1px solid black', backgroundColor: 'orange', minHeight: 200}}>
        One one one one one one one one one one<br />
        One one one one one one one one one one<br />
      </div>
    )
  }
}

const Two = () => {
  return (
    <div style={{ width: 300, border: '1px solid black', backgroundColor: 'yellow', minHeight: 200}}>
      <Match pattern='/two/one' component={TwoOne} />
      <Match pattern='/two/two' component={TwoTwo} />
      <Match pattern='/two(/)?' exactly={true} component={TwoHome} />
    </div>
  )
}


class App extends Component {

  render () {
    return (
        <BrowserRouter>
          <div style={{padding: 12}}>
            <div style={{marginBottom: 12}}>
              <Link to='/one'>One</Link> || <Link to='/two'>Two</Link>
              || <Link to='/two/one'>Two One</Link>
              || <Link to='/two/two'>Two Two</Link>
            </div>
            <div style={{position: 'relative'}}>
              <MatchWithFade pattern='/one' component={One} />
              <MatchWithFade pattern='/two' component={Two} />
            </div>
          </div>
        </BrowserRouter>
    )
  }
}

export default App;

Если вы загрузите это и откроете консоль, переключитесь между ссылками One и Two. Вы увидите, как в пользовательском интерфейсе произойдет перекрестное затухание, и вы увидите «ONE UNMOUNTING» в консоли, когда переход от One к Two завершится. Так что это правильно.

Теперь щелкните между Two One и Two Two. В этом случае, когда вы нажмете Two One, вы сразу увидите в консоли сообщение «TwoTwo размонтируется», что хорошо. Однако, если вы нажмете Two Two, вы увидите, что "TwoTwo размонтируется" примерно через секунду, что, как я понимаю, является количеством времени, которое требуется родительскому MatchWithFade для выполнения.

Так что я не уверен, что здесь происходит. Мой код просто взломан? Я делаю что-то, что RRv4 не поддерживает? Я обнаружил ошибку?

Любая помощь / руководство приветствуется!