как правильно настроить react-transition-group для независимой анимации вложенных анимаций?

Question

Я добавил вложенный маршрут в официальный пример перехода на React Router.

https://codesandbox.io/s/react-router-animated-transitions-lihls?file= / example. js

Я использовал затухание по умолчанию пример на внешнем переключателе и переход "масштабирования" вложенный переключатель, но оба переключателя оба исчезают и соединяются. т.е. внешняя анимация переопределяет вложенную анимацию, которая не имеет никакого эффекта. Эффект масштабирования css работает должным образом, если я помещаю его на родительский маршрут.

function AnimationApp() {
  return (
  ...
  <CSSTransition key={location.key} classNames="fade" timeout={500}>
    <Switch location={location}>
  ...
  );
}

function Nested() {
  return (
  ...
  <CSSTransition key={location.key} classNames="zoom" timeout={500}>
    <Switch location={location}>
    ...
  );
}

Я также пытался обернуть вложенный cstransition в группу переходов, но ошибка та же.

  <TransitionGroup>
    <CSSTransition key={location.key} classNames="zoom" timeout={500}>
      <Switch location={location}>
      ...

Я что-то делаю не так или response-transition-group не поддерживает вложенные маршруты?

спасибо

Answer 1

Я разработал решение, добавляя ключ к состоянию компонента независимо от объекта местоположения маршрутизатора и обновляя его при щелчках по ссылке. Это не самое красивое решение (добавление onclick ко всем ссылкам), и здесь есть немного повторений. Если в React есть способ сказать «добавить onClick ко всем ссылкам NavLink», это было бы лучше.

краткое описание изменений ...

  let [key, setKey] = useState();
  useEffect(() => {
    setKey(Math.random());
  }, []);
  ...
  <NavLink onClick={() => setKey(Math.random)} to={`${url}/child1`}>
     Child1
  </NavLink>
  ...
  <TransitionGroup>
    <CSSTransition>
      <Route path={`${url}/child1`} children={<Child1 />} />
  ...

Это будет работать на любом уровне в дереве компонентов, чтобы разрешить независимые CSST-переходы. Принцип разумен и имеет больше смысла, чем использование location.pathname для ключа для многоуровневых компонентов, но он требует некоторой очистки.

https://codesandbox.io/s/react-router-animated-transitions-using-state-and-effects-x3v3k?file= / example. js