не работает выход маршрутизатора и выходной группы - PullRequest
0 голосов
/ 12 июня 2019

Я пытаюсь реализовать переход gsap между компонентами с помощью react-router-dom.

App.js

function App() {

  return (
    <Router>
      <NavLink exact strict to='/'>Home</NavLink>
      <NavLink exact strict to='/services'>Services</NavLink>
      <AppRoutes />
    </Router>
  );
}

AppRoutes

const routes = [
  {path: '/', name: 'Home', Component: Home},
  {path: '/services', name: 'Services', Component: Services}
];

const AppRoutes = props => {

  return (
    <>
      {routes.map(({path, Component}) => (
        <Route key={path} exact path={path}>
          {({match}) => (<Transition
            timeout={1000}
            in={match !== null}
            mountOnEnter
            unmountOnExit>
            {(state) => {
              return (
                <Component state={state} match={match} />
              );
            }}
          </Transition>)}
        </Route>
      ))}
    </>
  );
};

В компоненте home есть useEffect

  useEffect(() => {

    console.log('home effects', props.state, props.isExiting);

    if (props.state === 'entered' && props.match !== null) {
      timeline.add(
        TweenMax.staggerFromTo('h1', 0.5, {y: '100%', opacity: 0}, {
          y: '0%',
          visibility: 'visible',
          opacity: 1,
          ease: Power3.easeOut,
        }, 0.3)
      );
      timeline.play();
    }

    if (props.state === 'exiting') {
      console.log('home reversing');
      timeline.reverse();
    }

    return () => {
      // timeline.kill();
    };
  });

Проблемы:

  1. При нажатии <NavLink exact strict to='/services'>Services</NavLink> страница останавливается на время timeout, строка timeline.reverse() выполняется, но безэффективная анимация и она переходит на маршрут /services
  2. При нажатии <NavLink exact strict to='/'>Home</NavLink> она не останавливается на время ожидания, а просто переходит на маршрут /

Кроме того, я не понимаю из документации, как in опора работает в Transition компоненте.

Есть идеи?

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