在this.props.dispatch（push（path））上未发生反应转换

Question

我正在使用反应过渡来淡入和淡出内容。

大多数情况下，这可以正常工作，但是我注意到一页可以立即呈现，而不会经历过渡状态。

我的活动：

  routeChange =(e) => {
    if(e.target.nodeName == "LI" || e.target.nodeName == "a") {
      return;
    }

    let path = "/detail/" + this.state.merchant.id;
    this.props.dispatch(push(path));
  }

还有我在该文件中的mapDispatchToProps

function mapDispatchToProps(dispatch) {
  let actions = bindActionCreators({ saveColor }, dispatch);
  return { ...actions, dispatch };
}

这是我的路径的工作方式：

<Route
  render={({ location }) => {
    const { pathname } = location;
    return (
      <TransitionGroup className="transition-group">
        <CSSTransition
          key={pathname}
          classNames="page"
          timeout={{
            enter: 1000,
            exit: 1000,
           }}
          >
          <Route
            location={location}
            render={() => (
              <Switch>
                <Route exact path="/login" component={LoginPage} />
                <Route exact path="/detail" component={Detail} />
                <PrivateRoute exact path="/" component={Cards} />
              </Switch>
            )}
          />
        </CSSTransition>
      </TransitionGroup>
    );
  }}
/>

而我的CSS：

.page-enter {
    opacity: 0.01;
}

.page-enter.page-enter-active {
    opacity: 1;
    transition: opacity 3000ms ease-in;
}

.page-exit {
    opacity: 0;
}

.page-exit.page-exit-active {
    opacity: 0.01;
    transition: opacity 3000ms ease-in;
}

无论如何，是否有强制将动画放在this.props.dispatch（push（path））上？