javascript 如何更改Next.js应用程序目录中不同页面的标题？

biswetbf 于 2023-02-07 发布在 Java

关注(0)|答案(2)|浏览(376)

在Next.js 13的app文件夹中，我有一个默认的根布局：

import "./globals.css";
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </head>
      <head />

      <body>
        <main>{children}</main>
      </body>
    </html>
  );
}

现在我已经为帐户页面创建了一个帐户文件夹;我已经在那里创建了一个page.js文件，还尝试创建一个layout文件，以便我可以更改标题;我在YouTube上看到一个视频，他们改变它像这样的代码：

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>account page</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </head>
      <head />

      <body>
        <main>{children}</main>
      </body>
    </html>
  );
}

这对他们很有效，但当我自己尝试时，它给了我一个错误：

1.validateDOMNesting(...): <html> cannot appear as a child of <main>.
2.You are mounting a new html component when a previous one has not first unmounted. It is an error to render more than one html component at a time and attributes and children of these components will likely fail in unpredictable ways. Please only render a single instance of <html> and if you need to mount a new one, ensure any previous ones have unmounted first.

也许我明白了一点，我已经使用了rootLayout，我不能再使用rootLayout。

JavaScript

来源：https://stackoverflow.com/questions/75353997/how-do-i-change-my-head-title-for-different-pages-in-next-jss-app-directory

2条答案

按热度按时间

6bc51xsx1#

据我所知，您正在页面文件夹中创建第二个RootLayout。您必须删除

<html lang="en">
  
</html>

因为rootLayout已经有了html元素，并且它呈现children组件。这个children组件呈现在body元素中（你可以从chrome开发工具中确认）。现在你有了<body><html> </html></body>结构

赞(0）回复(0）举报 2023-02-07

waxmsbnn2#

在app目录中，根目录layout Package 了所有嵌套的<html>，因此，正如您所做的那样，您最终得到了两个嵌套的<html>及其<body>和所有内容，这是不正确的。
嵌套的layout应该只返回可以直接进入第一个页面的{children}部分的内容。要更改任何页面的<head>，甚至是根页面，请考虑使用head.js文件：
head.js特殊文件允许您为管段配置<head>标记。

// app/user/head.js

export default function Head() {
  return (
    <>
      <title>My User Page Title</title>
    </>
  );
}

正如我上面所说的，如果你只是用Create Next App命令创建一个项目，你会在根布局中看到这段带有注解的代码：

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      {/*
        <head /> will contain the components returned by the nearest parent
        head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
      */}
      <head />
      <body>{children}</body>
    </html>
  );
}

赞(0）回复(0）举报 2023-02-07

我来回答

javascript 如何更改Next.js应用程序目录中不同页面的标题？

2条答案

相关问题

热门标签

最新问答