我无法让React过渡组工作.没有进入或离开过渡

Question

嗨，我无法让React过渡组工作。有人能看看这个，看看为什么它不起作用吗?链接正确地拉入组件，但没有转换。没有输入或输出转换，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

当对路由使用cstransition时，您不希望使用Switch或TransitionGroup。您希望将CSSTransition单独放置在每个路由中，然后每个路由将需要它自己的ref，并且您需要将ref传递给cstransition节点的nodeRefprop。

下面是我在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>
);
})}
</>
);
});