从 React Router 禁用 TransitionGroup 动画 CSSTransition

如何解决从 React Router 禁用 TransitionGroup 动画 CSSTransition

我被困两天试图禁用来自路由器的动画这是代码：

  const App = (): JSX.Element => {
  const effectClasses = (pathe: string) => {
    if (pathe.includes('page')) {
      return 'page'
    } else if (pathe.includes('themen')) {
      return 'themen'
    } else if (pathe.includes('portfolio')) {
      return 'portfolio'
    } else {
      return 'story'
    }
  }

  return (
    <Router>
      <Route
        render={({ location }) => (
          <TransitionGroup component={null}>
            <CSSTransition
              key={location.key}
              timeout={450}
              classNames={effectClasses(location.pathname)}
              mountOnEnter={false}
              unmountOnExit={true}
            >
              <Switch location={location}>
                <Route exact path='/'>
                  <Idle />
                </Route>
                <Route path='/:exhibitor'>
                  <ExhibitorsRoutes />
                </Route>
              </Switch>
            </CSSTransition>
          </TransitionGroup>
        )}
      />
    </Router>
  )
}

const ExhibitorsRoutes = (): JSX.Element => {
  const { path } = useRouteMatch()
  return (
    <Switch>
      <Route exact path={`${path}`}>
        <Snaptabs></Snaptabs>
      </Route>
      <Route exact path={`${path}/portfolio`}>
        <Portfolio></Portfolio>
      </Route>
      <Route exact path={`${path}/themen`}>
        <Themen></Themen>
      </Route>
      <Route path={`${path}/page/:id/:section`}>
        <Page></Page>
      </Route>
    </Switch>
  )
}

问题是当我在组件已经加载后在页面组件中时，有一个图片库，当我点击打开它时，页面再次渲染并且CSSTransition创建了一个DIV的克隆并重叠图库 div 并关闭它。我已经尝试了所有我发现的东西；尝试从 div 中取出 css 类，尝试添加一些 css 样式，例如 transition: none。我发现在看 div；就是这种来自Router的动画克隆了div，加上了classNames和动画css，接管了原来的div，没有办法阻止那个克隆div。

我需要帮助。