next.js 是否可以将元素放在布局组件“之前”？

eqoofvh9 于 2022-12-29 发布在其他

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

假设我有一个应用程序目录，里面有page.tsx和layout.tsx文件，我在layout.tsx中设置了页眉和页脚，它们会显示在每条路线上，在它们之间有

<main>{children}</main>

但只是为了主页（“/”route）我想在页眉”之前“显示一个div。我不想这个div显示在其他路径上，比如/about。我该怎么办？如果我把这个div放在位于app目录中的page.tsx中，它将显示在页眉和页脚之间。通过为app目录中的其他文件夹定义不同的布局，我只能在根布局中添加一些东西，但我真正想做的是从其他路由的根布局中减去一些东西（头之前的div）。

next.js

来源：https://stackoverflow.com/questions/74945111/is-it-possible-to-put-an-element-before-layout-component

2条答案

按热度按时间

xghobddn1#

问题：但仅对于主页（“/”路由），我想在标题”之前“显示一个div *

你可以像这样实现它

import { useRouter } from 'next/router';

export default function App({ Component, pageProps }: AppProps) {
    const router = useRouter();

    return (
       <>
         {route.pathName == '/' && <div> Home Page </div>}
         <Component {...pageProps} />
       </>
    );
}

赞(0）回复(0）举报 2022-12-29

h6my8fg22#

从@Zain_UI_Din的答案中得到启发，这个答案在使用新的/app目录时不起作用。我相信您可以在layout.tsx中做类似的事情，但我认为您必须使它成为客户端组件，因为您使用的是

'use client'; // not sure if needed
import { useRouter } from 'next/router';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter();

  return (
    <html lang="en">
      <body>
        {router.pathname === '/' && (
          <div>Home page</div>
        )}
        <header>header content</header>
        <main>{children}</main>
        <footer>footer content</footer>
      </body>
    </html>
  );
}

或者，您可以使用路由组为主页和其他页定义不同的布局，这样就可以实现这一点。

赞(0）回复(0）举报 2022-12-29

我来回答

next.js 是否可以将元素放在布局组件“之前”？

2条答案

你可以像这样实现它

相关问题

热门标签

最新问答