reactjs - 如何使用 React Router 4 实现动画

Question

我正在使用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，但没有显示动画。

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

亲切的问候，

Answer 1

您应该尝试Route用Switch

<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>