Я пытаюсь реализовать переход маршрутизатора реагировать.
Переход есть, но он испорчен - появляется входящий маршрут, затемняется и снова появляется. Но даже не для всех маршрутов! Кроме того, нет выходного перехода.
То, что я хочу, - это простое плавное затухание между каждым маршрутом. Как я могу это сделать?
У меня уже установлено следующее:
const App = ({location}) => {
return (
<section className="main__wrapper">
<ScrollToTop/>
<Header/>
<TransitionGroup>
<CSSTransition
key={location.key}
timeout={{enter: 1000, exit: 1000}}
classNames={'fade'}>
<Switch>
<Route path="/" exact>
<Home/>
<Projects/>
</Route>
<Route path="/project/:name" exact>
<Project/>
</Route>
<Route path="/about" exact>
<About/>
</Route>
</Switch>
</CSSTransition>
</TransitionGroup>
</section>
);
};
export default withRouter(App);
.fade-enter {
opacity: 0;
transition: 1000ms;
}
.fade-exit {
opacity: 0;
transition: 1000ms;
}