ReactTransitionGroup + ReactRouter相同路径的错误

时间:2018-10-15 20:09:41

标签: javascript reactjs react-router react-transition-group

我一直在尝试react-transition-group,偶然发现了一个我无法自行修复的错误。由于某些原因,当我单击当前路径时,动画也会触发。因此,基本上,如果我目前在/home处,并按下指向相同路径的链接,则动画将触发并仅重新渲染当前组件。为了简单起见,假设此组件仅将不透明度从0更改为1

代码在这里:

 <Navigation/>
 <TransitionGroup>
          <CSSTransition
            key={this.props.location.key}
            timeout={{ enter: 500, exit: 400 }}
            classNames="fade"
          >
            <Switch location={this.props.location}>
              <Route
                path="/phrasals/en"
                render={() => {
                  return (
                    <Layout>
                      <PhrasalVerbsEn />
                    </Layout>
                  );
                }}
              />
              <Route
                path="/phrasals/ge"
                render={() => {
                  return (
                    <Layout>
                      <PhrasalVerbsGe />
                    </Layout>
                  );
                }}
              />
              <Route
                path="/verbs"
                render={() => {
                  return (
                    <Layout>
                      <IrregularVerbs />
                    </Layout>
                  );
                }}
              />
              <Route
                path="/supported-languages"
                render={() => {
                  return (
                    <Layout>
                      <Languages />
                    </Layout>
                  );
                }}
              />
              <Route
                path="/"
                exact={true}
                render={() => {
                  return (
                    <Layout>
                      <Home />
                    </Layout>
                  );
                }}
              />
              <Route
                path="/courses"
                exact={true}
                render={() => {
                  return <CourseList />;
                }}
              />
            </Switch>
          </CSSTransition>
        </TransitionGroup>

实际构建,其中存在错误: https://d-ivashchuk.github.io/irregio-react/

0 个答案:

没有答案