использование группы переходов реакции с маршрутизатором razzle / afterjs / реакции 4

Question

Я пытаюсь реализовать анимированные переходы маршрутов в Razzle / Afterjs. В документации говорится, что

«Переходы на основе маршрутов / аналитика / загрузка / предварительная загрузка данных и т. Д. Должны предоставляться бесплатно или быть тривиальными для самостоятельной реализации».

так что я знаю, что это возможно, но я не могу понять, как реализовать. Я вижу, что client.js реализует React's BrowserRouter:

ensureReady(routes).then(data =>
  hydrate(
    <BrowserRouter>
      <After data={data} routes={routes} />
    </BrowserRouter>,
    document.getElementById('root')
  )
);

if (module.hot) {
  module.hot.accept();
}

и компонент <After> внедряет маршруты из routes.js как асинхронные компоненты:

импорт React из 'реакции';

import { asyncComponent } from '@jaredpalmer/after';

export default [
  {
    path: '/',
    exact: true,
    component: asyncComponent({
      loader: () => import('./pages/Library/Library'), // required
      Placeholder: () => <div>...LOADING...</div>, // this is optional, just returns null by default
    }),
  },
  {
    path: '/about',
    exact: true,
    component: asyncComponent({
      loader: () => import('./pages/About/About'), // required
      Placeholder: () => <div>...LOADING...</div>, // this is optional, just returns null by default
    }),
  },
];

Каждый компонент страницы (About, Library) в настоящее время представляет собой просто статический div, охватывающий все необходимые компоненты на странице.

Я предполагаю, что в каждом компоненте страницы я могу добавить переходы. Я думал, что размещение компонента <TransitionGroup> вокруг компонента <After> даст мне необходимую настройку, но все, что я пробовал, вполне работает.

Кто-нибудь успешно реализовал анимированные переходы маршрутов с after.js? Если да, у вас есть пример или простое объяснение, чтобы начать меня?

Вот что я попробовал:

В client.js:

ensureReady(routes).then((data) => { 
  console.log(location);
  hydrate(
    <BrowserRouter>
      <TransitionGroup component={null}>
        <CSSTransition 
          classNames="anim_route" 
          timeout={2000}
          onEnter={(node,appears)=> {
            console.log('enter',node,appears);
          }}
          onEnter={(node,appears)=>{
            debugger;
          }}
          key={location.pathname}
          appear={true}
        >

          <After data={data} routes={routes} />
        </CSSTransition>
      </TransitionGroup>
    </BrowserRouter>,
    document.getElementById('root')
  )
});

, которая была попыткой имитировать этого руководства для стандартного реагирующего маршрутизатора. Проблема, которую я вижу, заключается в том, что компонент <After> оборачивает наши компоненты и *.