在 ReactJS 中，是否可以使用 HeadlessUI 在通过 Route 加载的组件之间进行转换？如果是这样怎么办？

Question

如果可能的话，我希望在这里得到一些帮助。我正在 React 中开发一个项目，并使用 TailwindCSS 和 HeadlessUI 进行过渡。是否可以将 HeadlessUI 转换与路由一起使用？当使用路由加载下一个组件时，我无法让组件转换出来。我基本上有一个页面从右侧出现并填满屏幕。然后，当单击按钮时，页面应该从左侧消失，下一页应该同时从右侧加载，下一页在它们都转换时与上一页稍微重叠。我可以使用状态更改等轻松地做到这一点，但是当涉及到将组件包装在带有路径的路径中时，我一生都无法解决这个难题。输入转换有效，但离开转换不起作用，并且组件消失。据推测，该组件在离开转换开始之前已被卸载。那么，如何防止组件在离开转换结束之前被卸载呢？

             <Route path="/Subtest1">
                    <Transition
                        appear={true}
                        show={true}
                        enter="transform duration-500"
                        enterFrom={"translate-x-full"}
                        enterTo="translate-x-0"
                        leave="transform duration-500"
                        leaveFrom="translate-x-0"
                        leaveTo={"filter brightness-50 -translate-x-1/2"}
                        as="div"
                        className={"absolute z-20 top-0 left-0 right-0 w-full h-full flex items-center justify-center"}
                    >


                        <Subtest1 />
                        
                    </Transition>

                </Route>
                <Route path="/Subtest2">
                    <Transition
                        appear={true}
                        show={true}
                        enter="transform duration-500"
                        enterFrom={"translate-x-full"}
                        enterTo="translate-x-0"
                        leave="transform duration-500"
                        leaveFrom="translate-x-0"
                        leaveTo={"filter brightness-50 -translate-x-1/2"}
                        as="div"
                        className={"absolute z-20 top-0 left-0 right-0 w-full h-full flex items-center justify-center"}
                    >
                        <Subtest2 />
                    </Transition>
                    </Route>

我真的很感谢对此的任何帮助，因为尝试解决这些过渡已经花了很长的一周。真的可以做到吗？

提前致谢。