小编can*_*303的帖子

如果可能的话，我希望在这里得到一些帮助。我正在 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>

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

提前致谢。

你好，我在 React 中完成了几个项目，但我是在 React 中添加元标记的新手。我已经尝试过该插件react-meta-tags不起作用，并且尝试过react-helmet也不起作用并在控制台中收到以下错误：

\n

警告：不建议在严格模式下使用 UNSAFE_componentWillMount，\n这可能表明代码中存在错误。有关详细信息，请参阅\n https://reactjs.org/link/unsafe-component-lifecycles 。

\n

\n
• 将有副作用的代码移至 componentDidMount，并在构造函数中设置初始状态。
\n

\n

请更新以下组件：SideEffect(NullComponent)

\n

在搜索此错误时，我似乎无法使用react-helmet，而应该使用react-helmet-async.

不幸的是，如何使用它的示例与我的代码根本不匹配，因此无法使其工作。

我的页面基本上是：

Index.js\nApp.js\n|_ Home.js (/)\n|_ Page1.js (/page1)\n|_ Page2.js (/page2)\n

到目前为止，这是我的代码：

索引.js：

import React from \'react\';\nimport ReactDOM from \'react-dom/client\';\nimport \'./index.css\';\nimport App from \'./App\';\nimport reportWebVitals from \'./reportWebVitals\';\nimport { BrowserRouter } from "react-router-dom";\n\n\nconst root = ReactDOM.createRoot(document.getElementById(\'root\'));\nroot.render(\n  <React.StrictMode>\n      <BrowserRouter>\n            <App />\n      </BrowserRouter>\n  </React.StrictMode>\n);\n

应用程序.js

import \'./App.css\';\nimport {Route, Routes, useNavigate …