Reactjs 反应路由器v4和反应过渡组v2

我试图找到一个使用React Router v4和React Transition Group v2的低级动画的工作示例。我已经看过React Router文档中的示例，但它们只使用一条路由的CSS动画

这是我目前使用React路由器的方式：

export const App = () => (
  <div className="app-container">
    <main className="app-container__content">
      <Switch>
        <Route exact path="/projects/:slug" component={ProjectPage} />
        <Route exact path="/" component={StartPage} />
      </Switch>
    </main>
  </div>
);

export const App=（）=>(
);

这是我的Root.jsx：

const Root = ({ store, history }) => (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Switch>
        <Route path="/" component={App} />
      </Switch>
    </ConnectedRouter>
  </Provider>
);

constroot=（{store，history}）=>(
);

我已经在这里测试了解决方案：-但它不起作用。有人能给我指出正确的方向吗

更新

我试过这样做，但是回拨没有被调用。因此，我最终在dom中创建了多个页面

export const App = ({ location }) => {
  console.log(location);

  return (
    <div className="app-container">
      <main className="app-container__content">
        <ScrollToTop />
        <TransitionGroup>
          <Switch key={location.pathname} location={location}>
            <Route exact path="/projects/:slug" component={ProjectPage} />
            <Route exact path="/" component={StartPage} />
          </Switch>
        </TransitionGroup>
      </main>
    </div>
  );
};

export const App=（{location}）=>{
控制台日志（位置）；
返回(
);
};

您缺少

转换

组件本身

它应该是这样的：

<TransitionGroup>
  <CSSTransition
    key={location.key}
    classNames="page-animation"
    timeout={{ enter: PAGE_ENTER_ANIMATION_SPEED, exit: PAGE_EXIT_ANIMATION_SPEED }}>
    <Switch location={location}>
      <Route exact path="/projects/:slug" component={ProjectPage} />
      <Route exact path="/" component={StartPage} />
    </Switch>
  </CSSTransition>
</TransitionGroup>

您可以从

TransitionGroup

获取

this.props.in

，以指示您是进入还是离开。

---

this.props.onExited

是您从

TransitionGroup

获得的另一个道具，您必须在退出动画完成时调用它，这样

TransitionGroup

将知道您应该卸载。

您缺少

Transition

组件本身

它应该是这样的：

<TransitionGroup>
  <CSSTransition
    key={location.key}
    classNames="page-animation"
    timeout={{ enter: PAGE_ENTER_ANIMATION_SPEED, exit: PAGE_EXIT_ANIMATION_SPEED }}>
    <Switch location={location}>
      <Route exact path="/projects/:slug" component={ProjectPage} />
      <Route exact path="/" component={StartPage} />
    </Switch>
  </CSSTransition>
</TransitionGroup>

您可以从

TransitionGroup

获取

this.props.in

，以指示您是进入还是离开。

---

this.props.onExited

是您从

TransitionGroup

获得的另一个道具，您必须在退出动画完成时调用它，因此，

TransitionGroup

将知道您应该卸载。

这里有一篇文章解释如何设置react-router v4和react-transition group（使用多个路由和转换，具体取决于下一个状态）：

这里有一篇文章解释如何设置react-router v4和react-transition group（使用多个路由）根据下一个状态进行转换：

如果hackernoon演示不适合您，我建议您发布您正在使用的代码，以防教程中出现一些细微的差异code@icc97他没有使用React过渡组的最新版本。如果hackernoon演示不适合您，我建议您发布您正在使用的代码，以防教程中出现一些细微的差异code@icc97他没有使用React过渡组的最新版本。谢谢你的回答。我要求一个解决方案，你可以使用低水平的动画，而不是CST动画。CSTranslation他们的网站上有很多例子，但很难找到低级别动画的工作示例。在这种情况下，您可以使用Transition it self（CSTranslation是一种特殊的过度转换），您可以在react Transition group实现中看到它，您只需要实现自己的Onener，onExit等。感谢您的回答。我要求一个解决方案，你可以使用低水平的动画，而不是CST动画。CSTranslation他们的网站上有很多例子，但是很难找到低级别动画的工作示例。在这种情况下，您可以使用Transition it self（CSTranslation是一种特殊的过度转换），您可以在react Transition group实现中看到它，您只需要实现自己的Oneter、onExit等。