ReactJS: переходы страниц с помощью маршрутизатора и группы реагирования-перехода V4 - PullRequest
Новая
       10

ReactJS: переходы страниц с помощью маршрутизатора и группы реагирования-перехода V4

0 голосов
/ 07 марта 2020

Я строю СПА с ReactJS, и я столкнулся с этой довольно распространенной проблемой. Мой клиент хочет разных переходов страниц в разных разделах приложения . Приложение довольно простое, за исключением этого экрана, где левая половина экрана представляет собой компонент с внутренней навигацией, а правая сторона - видеоплеер [проверьте прикрепленное изображение].

This is where it gets tricky

Моя упрощенная архитектура выглядит следующим образом: основной коммутатор для управления навигацией по страницам: 

<Switch>
  <Route path="/">
    <HomeScreen/>
  </Route>
  <Route path="/intro">
    <IntroScreen/>
  </Route>
  <Route path="/splitscreen">
    <SplitScreen/>
  </Route>
</Switch>

Где компонент SplitScreen содержит вложенный коммутатор (левая половина) и видеопроигрыватель (правая половина ): 

<InteractionHalf>
    <Switch>
      <Route path="/1">
        <FirstScreen/>
      </Route>
      <Route path="/2">
        <SecondScreen/>
      </Route>
      <Route path="/3">
        <ThirdScreen/>
      </Route>
    </Switch>
<InteractionHalf>
<VideoPlayer/>

ПРОБЛЕМА : применить другую анимацию перехода страниц для маршрутов в SplitScreen, которая не повлияет на видеопроигрыватель.

После большого количества проб и ошибка Я успешно использовал response-transition-group, как описано здесь : 

const location = useLocation(); <-- passing location to the Switch

<TransitionGroup>
  <CSSTransition key={location.key} timeout={300} classNames="whateverClass">
     <Switch location={location}>
      ...routes
     </Switch>
  </CSSTransition>
</TransitionGroup>

Работает как шарм! Я имею полный контроль и могу изменить направление или тип перехода, используя свойство TransitionGroup: childFactory

НОВАЯ ПРОБЛЕМА: Этот подход прекрасно работает на каждый компонентов коммутатора, НО при использовании в обоих, внешний коммутатор имеет приоритет над внутренним, и анимация только того, что половина экрана становится невозможной. Изменение пути запускает анимацию всего экрана, установленную на внешний коммутатор.

PS: я также попробовал подход, указанный в документах , но он не работает при использовании в коммутаторе. Выход из анимации происходит немедленно, даже если компоненты отображаются в дочерней структуре Route, где объект match существует только в том случае, если маршрут соответствует или имеет значение null. Это должно позволить мне управлять in из CSSTransition. 

<Route
  path={path} 
  children={ ({match}) => (
    <CSSTransition in={(match != null)}>
      <Component/>
    </CSSTransition>
)}

Я могу упустить что-то совершенно очевидное, поэтому любые идеи предложений приветствуются. Спасибо!

...