如何使用 React Router 4 实现动画答案

【问题标题】：How to implement animations using react router 4如何使用 React Router 4 实现动画
【发布时间】：2017-10-18 00:23:17
【问题描述】：

我正在使用React Router v4，但在实现页面之间的转换时遇到了一些困难。

我正在使用包 react-addons-css-transition-group 使用转换来显示动画作为官方 React Router 示例。

这是我的路由器：

<BrowserRouter>
  <Route render={
    ({ location }) => (
      <ReactCSSTransitionGroup
        transitionEnterTimeout={300}
        transitionLeaveTimeout={300}
        transitionName="fade"
      >
        <Route
          component={LoginView}
          exact
          key="l"
          location={location}
          path="/"
        />

        <Route
          component={UnderConstructionView}
          exact
          key="uc"
          location={location}
          path="/under-construction"
        />
      </ReactCSSTransitionGroup>
    )
  }
  />
</BrowserRouter>

现在，在UnderConstructionView 上，我有一个简单的链接<Link to="/">home page</Link>，它会占用我的LoginView，但没有显示动画。

任何可以提供一些建议的人为什么它不起作用。我一定错过了什么，但我没有看到。

亲切的问候，

【问题讨论】：

标签： reactjs animation react-router react-router-dom

【解决方案1】：

您应该尝试用Switch 包装Route 组件

<BrowserRouter>
  <Route render={
    ({ location }) => (
      <ReactCSSTransitionGroup
        transitionEnterTimeout={300}
        transitionLeaveTimeout={300}
        transitionName="fade">
          <Switch key={location.key}>
            <Route
              component={LoginView}
              exact
              key="l"
              location={location}
              path="/" />

            <Route
              component={UnderConstructionView}
              exact
              key="uc"
              location={location}
              path="/under-construction" />
          </Switch>
      </ReactCSSTransitionGroup>
    )
  }
  />
</BrowserRouter>

【讨论】：