Я экспериментировал с react-transition-group
и наткнулся на ошибку, которую я не могу исправить самостоятельно.По какой-то причине анимация срабатывает также при нажатии на текущий путь.Таким образом, если я в данный момент нахожусь на /home
и нажимаю на ссылку, которая ведет по тому же пути, анимация сработает и просто изменит текущий компонент.Для простоты предположим, что этот компонент изменяет непрозрачность только с 0
до 1
.
Код здесь:
<Navigation/>
<TransitionGroup>
<CSSTransition
key={this.props.location.key}
timeout={{ enter: 500, exit: 400 }}
classNames="fade"
>
<Switch location={this.props.location}>
<Route
path="/phrasals/en"
render={() => {
return (
<Layout>
<PhrasalVerbsEn />
</Layout>
);
}}
/>
<Route
path="/phrasals/ge"
render={() => {
return (
<Layout>
<PhrasalVerbsGe />
</Layout>
);
}}
/>
<Route
path="/verbs"
render={() => {
return (
<Layout>
<IrregularVerbs />
</Layout>
);
}}
/>
<Route
path="/supported-languages"
render={() => {
return (
<Layout>
<Languages />
</Layout>
);
}}
/>
<Route
path="/"
exact={true}
render={() => {
return (
<Layout>
<Home />
</Layout>
);
}}
/>
<Route
path="/courses"
exact={true}
render={() => {
return <CourseList />;
}}
/>
</Switch>
</CSSTransition>
</TransitionGroup>
Фактическая сборка с представленной здесь ошибкой:https://d -ivashchuk.github.io / irregio реагируют /