首页 > 解决方案 > 在 reactjs 中添加过渡到路由

问题描述

我试图在我的路线之间添加过渡。但想不通。尝试了一些示例,但没有一个有效。这是我的代码;

import { TransitionGroup, CSSTransition } from 'react-transition-group';

const Twitter = props => {
  const location = useLocation();

  return (
    <AppContainer backgroundColor="rgb(1, 22, 39)">
      <HeaderApp title_icon={twitterLogo} noBorder Color="white" />
      <TransitionGroup>
        <CSSTransition
          key={location}
          classNames="twitter-transition"
          timeout={500}
        >
          <Switch location={location}>
            <Route exact path={props.match.path} component={TwitterHome} />
            <Route
              path={props.match.path + '/profile'}
              component={TwitterProfile}
            />
          </Switch>
        </CSSTransition>
      </TransitionGroup>
      <TwitterMenu />
    </AppContainer>
  );
};

标签: reactjsreact-routerreact-hooksreactcsstransitiongroup

解决方案


推荐阅读