reactjs: как использовать TransitionGroup & CSSTransition с перенаправлением при входе в систему - PullRequest
0 голосов
/ 03 мая 2020

Я использую 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>
            );
        }
    }
}

Почему перенаправление не использует переход?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...