选择性地应用转换以响应路由器路由答案

【问题标题】：Applying transitions selectively to react router routes选择性地应用转换以响应路由器路由
【发布时间】：2023-03-07 16:03:01
【问题描述】：

我有一组路由作为 TransitionGroup 的子级，并且希望仅将转换应用于某些路由更改。我的代码如下：

<TransitionGroup>
    <CSSTransition timeout={300} classNames='fade' key={location.key}>
      <Routes>
        <Route path='/' element={<HomeScreen />} />
        <Route path='/menu'>
          <Route path=':category' element={<MenuScreen />} />
          <Route path='' element={<MenuScreen />} />
        </Route>
      </Routes>
    </CSSTransition>
  </TransitionGroup>

我希望在从 HomeScreen 组件移动到 MenuScreen 组件时进行转换，反之亦然，但在 MenuScreen 路由之间切换时不需要。例如，如果用户从“/menu/appetizers”移动到“/menu/desserts”，我不希望触发转换。事实上，过渡工作正常，但每次我导航到新路线时都会触发。我认为有一种简单的方法可以做到这一点，但我对 React 比较陌生，似乎找不到任何示例。

任何建议将不胜感激。

【问题讨论】：

标签： reactjs react-router react-transition-group

【解决方案1】：

我找到了一种解决方法，但它有点 hack-y 和不优雅。

我只是简单的得到了当前路径的第一个组件如下：

  const location = useLocation();
  
  var pathName = location.pathname;

  const components = pathName.split('/');

  if (components.length > 1) {
    pathName = components[1];
  }

...然后将其用作 CSSTransition 的键：

<CSSTransition timeout={300} classNames='fade' key={pathName}>

如果有人知道更好的解决方案，请分享。

【讨论】：