在反应路由器中使用反应过渡组时反应页面css过渡问题

如何解决在反应路由器中使用反应过渡组时反应页面css过渡问题

我正在尝试向我的应用添加页面转换，该应用使用 react-router 进行路由。我按照 React 过渡组教程 (http://reactcommunity.org/react-transition-group/with-react-router) 添加了过渡。虽然它似乎有效，但我看到正在发生的转换中存在一些小故障。下面是我的js代码

const Red = () => {
    return (
        <div className="red"></div>
    )
}

const Blue = () => {
    return (
        <div className="blue"></div>
    )
}

const testRoutes = [
    {path: '/red',name: 'Red',Component: Red},{path: '/blue',name: 'Blue',Component: Blue},]

function App() {
    const domRefs = useRef({});
    testRoutes.forEach(({name}) => {
        domRefs.current[name] = createRef();
    })
   return (
   <div className="app">
      <div>
           <Link to="/red">Red</Link>
           <Link to="/blue">Blue</Link>
       </div>
                {testRoutes.map(({path,name,Component}) => (
                    <Route key={path} path={path} exact>
                        {({match}) => {
                            if(match) routeMatchedCallback(true);
                            console.log('MATCH >> ',match);
                            return (
                                <CSSTransition 
                                    nodeRef={domRefs.current[name]}
                                    in={match != null}
                                    timeout={600}
                                    classNames="page"
                                    unmountOnExit
                                >
                                    <div ref={domRefs.current[name]} className="page">
                                        <Component />
                                    </div>
                                </CSSTransition>
                            )
                        }}
                    </Route>
                ))}
    </div>
}

CSS

.page-enter {
    transform: translateX(-100%);
}
  
.page-enter-active {
    transform: translateX(0%);
    transition: transform 300ms;
}
  
.page-exit {
    transform: translateX(0%);
}
  
.page-exit-active {
    transform: translateX(100%);
    transition: transform 300ms;
}

.red {
    background-color: red;
    height: 100vh;
    width: 100%;
}

.blue {
    background-color: blue;
    height: 100vh;
    width: 100%;
}

发生的事情是 Red 组件的转换发生在意料之中，但是对于 Blue 组件，转换似乎没有按预期发生，它只是隐藏和显示。

注意到的另一件事是，如果我将 Blue 组件放置为 routes 数组中的第一个元素，则 Blue 组件的转换按预期工作。

const testRoutes = [
    {path: '/blue',{path: '/red',]

这是相同的代码笔网址：https://codepen.io/antojoy23/pen/BaWqGYG?editors=0110