Я использую Laravel & Reactjs с реактивом-маршрутизатором-домом. Я создал страницу входа Reactjs, которая перенаправляет пользователя на домашнюю страницу панели инструментов, но она не использует анимацию csstransition. В панели инструментов у меня есть навигационная панель, которая работает с csstransition. Так, как я могу сделать вход также с переходом.
перенаправление страницы входа в систему истинно, когда положительный вход в систему (внутри функции рендеринга):
const { redirect } = this.state;
if (redirect) {
return <Redirect to='/home'/>;
}
анимированный переключатель:
//router
const AnimatedSwitch = withRouter(({ location, ...props }) => {
return (
<TransitionGroup>
<CSSTransition key={location.key} classNames="slide" timeout={350}>
<Switch location={location}>
<Route exact path="/home" component={Dashboard} />
<Route exact path="/clients" render={() => <Clients />} />
<Route exact path="/login" component={() => <Login isAuth={props.isAuth} />} />
</Switch>
</CSSTransition>
</TransitionGroup>
)
});
приложение отображает:
render() {
if (this.state.auth) {
return (
<div className="wrapper">
<BrowserRouter>
<Sidebar />
<div className="main-panel">
<div className="content">
<AnimatedSwitch isAuth={this.isAuth}/>
</div>
</div>
</BrowserRouter>
</div>
);
} else {
return (
<div className="wrapper">
<BrowserRouter>
<div className="main-panel">
<AnimatedSwitch isAuth={this.isAuth}/>
</div>
</BrowserRouter>
</div>
);
}
}
}
Почему перенаправление не использует переход?