无法使用 React 18.2.0 添加元标记

Question

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

\n

\n

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

\n

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

\n

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

\n

\n

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

\n

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

\n

我的页面基本上是：

\n

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

\n

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

\n

索引.js：

\n

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

\n

应用程序.js

\n

import \'./App.css\';\nimport {Route, Routes, useNavigate } from "react-router-dom";\nimport Home from \'./pages/Home\';\nimport Page1 from "./pages/Page1";\nimport Page2 from "./pages/Page2";\nimport NoMatch from "./components/NoMatch";\nimport React from "react"\n\nfunction App() {\n    const navigate = useNavigate();\n  return (\n    <>\n\n                    <button onClick={(e)=>{navigate(\'/\');}} >\n                        Home\n                    </button>\n                    <button onClick={(e)=>{navigate(\'/page1\');}} >\n                        Page1\n                    </button>\n                    <button onClick={(e)=>{navigate(\'/page2\');}} >\n                        Page2\n                    </button>\n\n        \n        <Routes>\n\n            <Route exact path={\'/\'} element={<Home />} />\n\n            <Route path={"/page2"} element={<Page2 />} />\n\n            <Route path={"/page1"} element={<Page1 />} />\n\n\n            {/*####   404 #####*/} \n            <Route path={"*"} element={<NoMatch />} />\n        </Routes>\n        </>\n  );\n}\n\nexport default App;\n

\n

除了名称发生变化外，Home.js、Page1.js、Page2.js 均相同：

\n

import React from "react"\n\n\nconst Home = () =>{\n\n\n    return(\n        <>\n            hello from Home\n        </>\n    )\n}\nexport default Home\n

\n

在react-helmet-async的文档页面上，使用示例是这样的：

\n

import React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Helmet, HelmetProvider } from \'react-helmet-async\';\n\nconst app = (\n  <HelmetProvider>\n    <App>\n      <Helmet>\n        <title>Hello World</title>\n        <link rel="canonical" href="https://www.tacobell.com/" />\n      </Helmet>\n      <h1>Hello World</h1>\n    </App>\n  </HelmetProvider>\n);\n\nReactDOM.hydrate(\n  app,\n  document.getElementById(\xe2\x80\x98app\xe2\x80\x99)\n);\n

\n

但我不知道应该去哪个页面或者应该去我的代码中的哪里。我不知道他们的“App”指的是什么，而且我在任何地方都没有 id 为“app”的元素。我尝试将此代码应用到我的所有页面，但出现错误。

\n

有谁知道如何让它工作或任何其他方式让元标签（标题和元描述）与当前版本的 React 一起工作？

\n

谢谢。

\n

Answer 1

这是基于 @Moath 的答案的版本，它同时解决了页面标题和元描述：

const usePageMeta = (title, description) =>{
    const defaultTitle = "app-name";
    const defaultDesc = "meta description";

    useEffect(() => {
        document.title = title || defaultTitle;
        document.querySelector("meta[name='description']").setAttribute("content", description || defaultDesc);
    }, [defaultTitle, title, defaultDesc, description]);
};

function Demo() {
  usePageMeta("Demo Page Title", "Demo meta description");
  return <h1>Demo</h1>;
}