Белая страница между маршрутами в анимации реагирования маршрутизации

Question

Я пытаюсь создать анимацию в режиме response-routing, но у меня проблема: анимация работает, но между переходами есть пустая (белая) страница. Похоже на белое мигание. Сначала идет мигание, а потом анимация. В чем проблема?

index. js - основной компонент, который импортирует компонент App, как показано ниже.

ReactDOM.render(
    <HashRouter >
      <Route render={({ location }) => (
          <App location={location}/>
      )}/>

    </HashRouter>,
  document.getElementById('root')
);

затем app. js с маршрутизацией.

function App({location}) {
  return (
    <div className="App">
      <Header/>
      <main>
        <TransitionGroup>
          <CSSTransition
              timeout={200}
              classNames='page'
              key={location.pathname}>
            <Switch>
              <Route exact path='/' component={Main}/>
              <Route path='/about' component={About}/>
              <Route path='/contact' component={Contact}/>
            </Switch>
           </CSSTransition>
        </TransitionGroup>
      </main>
      <Footer/>
    </div>
  );
}

export default App;

затем стиль. css

.page {
    position: absolute;
    left: 15px;
    right: 15px;
}

.page-enter {
    opacity: 0;
    transform: scale(1.1);
}

.page-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 200ms, transform 300ms;
}

Answer 1

Это не отличается от другого использования CSSTransition, просто убедитесь, что вы передали location в Switch, чтобы оно соответствовало старому местоположению при анимации.

<Switch location={location}>

https://reactrouter.com/web/example/animated-transitions