ReactCSSTransitionGroup when changing path

I can’t get transitions between pages working. I’ve tried basing my code off of the universal router example here, but it doesn’t work. I’m passing a unique path prop to use as the unique transition key for ReactCSSTransitionGroup to use.

I’ve also tried setting ReactCSSTransitionGroup at every level in the Layout.js file, and none have worked. What am I missing?

Here is my latest Layout.js code:

render() {
  const {
    path,
    children
  } = this.props;

  return (
    <ReactCSSTransitionGroup
      component="div"
      className="container"
      transitionName={{
        enter: s.enter,
        leave: s.leave
      }}
      transitionEnterTimeout={9000}
      transitionLeaveTimeout={9000}
    >
      <div className="mdl-layout mdl-js-layout" key={path} ref={node => (this.root = node)}>
        <div className="mdl-layout__inner-container">
          <Header />
          <main className="mdl-layout__content">
            <div className={cx(s.content, this.props.className)}>
              {children}
            </div>
            <Footer />
          </main>
        </div>
      </div>
    </ReactCSSTransitionGroup>
  );
}

[zaneriley]

@stinoga Do you mind sharing your solution? I don’t think I understand the change by moving the <Layout /> component.

[frenzzy]

see https://github.com/kriasoft/react-starter-kit/pull/959