Question

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

我正在使用包react-addons-css-transition-group使用转换将动画显示为官方的React路由器示例。

这是我的路由器：

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

如何使用反应路由器4实现动画

1 个答案: