我无法让 React Transition Group 工作。没有进入或离开过渡

Question

您好，我根本无法让 React Transition Group 工作。任何人都可以看看这个，看看为什么它不起作用？链接正确地拉入组件，但没有过渡。没有过渡进出，console.log 不会触发。我确实在控制台中收到了折旧警告，但一切都是最新的，我不确定这是否会导致它停止工作。我很茫然，所以任何帮助都将不胜感激。谢谢。

import * as React from 'react'
import {
    HashRouter as Router,
    Link,
    Switch,
    Route,
    Redirect,
    useParams,
    useLocation
} from "react-router-dom";
import {TransitionGroup, CSSTransition} from "react-transition-group";


const TransGroup = () =>{

    const location = useLocation();

    return(
        <>
            <div className={"w-full h-full"}>
        <Router>
            <div className={"fill w-full"}>

                <ul className={"nav overflow-hidden mb-8 flex "}>
                    <li><Link className={"bg-white p-8 m-8 text-black inline-block"} to={"/"}>Red</Link></li>
                    <li><Link className={"bg-white p-8 m-8 text-black inline-block"} to={"/purple"}>Purple</Link></li>
                    <li><Link className={"bg-white p-8 m-8 text-black inline-block"} to={"/blue"}>Blue</Link></li>
                    <li><Link className={"bg-white p-8 m-8 text-black inline-block"} to={"/yellow"}>Yellow</Link></li>
                    <li><Link className={"bg-white p-8 m-8 text-black inline-block"} to={"/pink"}>Pink</Link></li>
                    <li><Link className={"bg-white p-8 m-8 text-black inline-block"} to={"/aqua"}>Aqua</Link></li>

                </ul>
            </div>
        </Router>
        <div className={"fill content w-full h-full"}>
            <TransitionGroup>
                <CSSTransition
                    timeout={5000}
                
                    onEnter={() => {
                        console.log('FIRED!');
                    }}
                    classNames={{
                        appear: 'my-node-appear',
                        appearActive: 'my-node-active-appear',
                        appearDone: 'my-node-done-appear',
                        enter: 'my-node-enter',
                        enterActive: 'my-node-active-enter',
                        enterDone: 'my-node-done-enter',
                        exit: 'my-node-exit',
                        exitActive: 'my-node-active-exit',
                        exitDone: 'my-node-done-exit',
                    }}
                    key={location.key}

                >
            <Switch location={location}>
                <Route exact path={"/"}>
                 
                    <div className={"bg-red-500 text-white w-full h-16"}>
                        RED
                    </div>
                </Route>
                <Route exact path={"/purple"}>
                   
                    <div className={"bg-lcnuk-other text-white w-full h-16"}>
                        PURPLE
                    </div>
                </Route>
                <Route exact path={"/blue"}>
                 
                    <div className={"bg-blue-500 text-white w-full h-16"}>
                        BLUE
                    </div>
                </Route>
                <Route exact path={"/yellow"}>
                 
                    <div className={"bg-lcnuk-other text-white w-full h-16"}>
                        YELLOW
                    </div>
                </Route>
                <Route exact path={"/pink"}>
                 
                    <div className={"bg-white text-black w-full h-16"}>
                        PINK
                    </div>
                </Route>
                <Route exact path={"/aqua"}>
                
                    <div className={"bg-black text-white w-full h-16"}>
                        AQUA
                    </div>
                </Route>
                <Route path={'*'}>
                    <div>Not Found</div>
                </Route>
            </Switch>
                </CSSTransition>
            </TransitionGroup>
        </div>
            </div>
        </>
    )
}
export default TransGroup

Answer 1

当为路由使用 CSSTransition 时，您不想使用 Switch 或 TransitionGroup。您想将CSSTransition 分别放在每个路由中，然后每个路由都需要它自己的ref，并且您需要将引用传递给CSSTransition 节点的nodeRef 属性。

这是我在 Codesandbox 上制作的一个工作示例：

• https://codesandbox.io/s/react-transition-routes-with-noderef-k9q47?file=/src/App.tsx

下面是演示这一点的代码块：

///...

interface AppRoute {
  path: string;
  title: string;
  Component: React.ComponentType;
}

const appRoutes: AppRoute[] = [
  { path: "/", title: "Home", Component: HomePage },
  { path: "/page1", title: "Page 1", Component: Page1 },
  { path: "/page2", title: "Page 2", Component: Page2 }
];

///...

////// CONTENT TRANSITION ROUTER
const PageContent = withRouter(({ location }) => {
  let routeRefs: any[] = [];

  const isMatch = useCallback(
    (path: string): boolean => {
      return location.pathname === path ? true : false;
    },
    [location]
  );

  return (
    <>
      {appRoutes.map(({ path, Component }, index) => {
        routeRefs[index] = React.useRef(null);

        return (
          <Route key={index} exact path={path}>
            {() => {
              // Route callback ensures the transitions are loaded correctly
              return (
                <CSSTransition
                  nodeRef={routeRefs[index]}
                  in={isMatch(path)}
                  timeout={300}
                  classNames="fade"
                  unmountOnExit
                  appear
                >
                  <div ref={routeRefs[index]} className="fade">
                    <Component />
                  </div>
                </CSSTransition>
              );
            }}
          </Route>
        );
      })}
    </>
  );
});