Reactjs Next.js `getLayout` 函数没有被调用

发布于08月10日

我有layout.jsx分，如下所示:

import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
import { Analytics } from '@vercel/analytics/react';
import Bootstrap from '../pages/components/bootstrap';
import Navbar from '../pages/components/Navbar';

export default function RootLayout({ children }) {
  return (
    <html lang='en'>
      <body className={inter.className + ' container'}>
        <Bootstrap></Bootstrap>
        <Navbar></Navbar>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

并拥有pages/news.tsx个，如下所示:

import DataClient from '../lib/data/DataClient';
import NewsItem from './components/NewsItem';
import RssFeedItem from '../lib/data/models/RSSFeedItem';
import RootLayout from './components/layout';

type NewsProps = {
  rssFeeds: RssFeedItem[];
};

export default function News({ rssFeeds }: NewsProps) {
  const items = rssFeeds.map((item) => {
    return <NewsItem key={item.id} item={item}></NewsItem>;
  });
  return <div>{items}</div>;
}

News.getLayout = function getLayout(page) {
  console.log('getlayout');
  return <RootLayout>{page}</RootLayout>;
};

export const getServerSideProps = async () => {
  const dataClient = new DataClient();
  const limit = 50;
  const skip = 0;
  const rssFeeds = await dataClient.getRssFeedItems(limit, skip);

  // Convert isoDate properties to serializable format (string)
  const rssFeedsSerialized = rssFeeds.map((feed) => ({
    ...feed,
    isoDate: feed.isoDate.toISOString(),
    created_at: feed.created_at.toISOString(),
    updated_at: feed.updated_at.toISOString()
  }));

  return {
    props: {
      rssFeeds: rssFeedsSerialized
    }
  };
};

但是News.getLayout不会被解雇，并且/news URL没有显示RootLayout中的Navbar组件.我是不是漏掉了什么？

// pages/_app.js import Layout from "./_layout"; export default function MyApp({ Component, pageProps }) { // Use the layout defined at the page level, if available const getLayout = Component.getLayout; if (getLayout) { return getLayout(<Component {...pageProps} />); } // You could wrap pages with no getLayout with a global layout if you want return <Component {...pageProps} />; }

Reactjs Next.js `getLayout` 函数没有被调用

推荐答案

Reactjs相关问答推荐

单击空白区域时，Reaction Multiple下拉组件不关闭

如何使Reaction Select 选项菜单从选项数组的特定索引开始

使用筛选器的Primereact DataTable服务器端分页？

为多租户SSO登录配置Azure AD应用程序

生成Reaction Vite应用程序的停靠容器时无法识别环境变量

如何在整个应用程序中显示通用弹出窗口中的点击事件

折叠并重新打开react 手风琴将重置内部状态

MUI 日期 Select 器 - 最小日期混乱

在 React 中是否有任何理由要记住 Redux 操作创建者？

警告：遇到两个子元素拥有同一把 keys .键应该是唯一的，以便组件在更新时保持其身份

REACT： UseState 没有更新变量(ant design 模态形式)

ReactJS 中的图像加载顺序

如何更新redux状态存在的输入框

无法在react 中向表中添加行

VideoSDK api 不使用更新状态

如何在 React map 函数循环中使用
标签

在 Formik 表单中访问子组件的值

如何修复 Next.js 13 中类型 AppRouterInstance 上不存在 x？

找不到元素 - 这是参考问题吗？

错误未捕获的错误：[App] 不是组件. 的所有子组件必须是或