在 Nextjs 中向 _app.js 添加持久化组件

Question

所以我正在玩我的第一个 Nextjs 应用程序，但在添加持久性侧边栏时遇到了问题。

我发现了 Adam Wathan's article on persistent layouts in nextjs, but it seems like there is a newer pattern that was added recently using the _app.js page. I went to the docs 和一些 github 问题，但似乎还没有很多文档。

所以对于我的例子，我有我的 _app.js 文件：

import '../css/tailwind.css'
import Head from 'next/head'
import Sidebar from "../components/Sidebar";

export default function App({Component, pageProps}){
  return(
    <>
      <Head />
        <Component {...pageProps} />
    </>
  )
}

import React, { useState } from "react";
import Transition from "../components/Transition";
import Link from 'next/link'

function Sidebar({ children }) {
 const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [hideSidebarMenu, setHideSidebarMenu] = useState(true);

  const openSidebar = () => {
    setIsSidebarOpen(true);
    setHideSidebarMenu(false);
  };

  const closeSidebar = () => {
    setIsSidebarOpen(false);
  };

  const hideSidebar = () => {
    setHideSidebarMenu(true);
  };

  return(
    <div>
      /*sidebar links here*/
    </div>
  )
}

export default Sidebar;

如何将侧边栏组件集成到其中？我已经尝试将它添加到组件和包装组件旁边，以及其他一些没有运气的迭代。希望我只是错过了一些简单的东西。

Answer 1

这很奇怪。我本可以发誓我以前尝试过这个非常简单的解决方案，但像这样就足够了。

此解决方案将在您正在使用边栏中的 children 属性的页面中提供内容。

import '../css/tailwind.css'
import Head from 'next/head'
import Sidebar from "../components/Sidebar";

export default function App({Component, pageProps}){
  return(
    <>
      <Head />
      <Sidebar >
        <Component {...pageProps} />
      </Sidebar>
    </>
  )
}

此选项只会将边栏与内容一起呈现

import '../css/tailwind.css'
import Head from 'next/head'
import Sidebar from "../components/Sidebar";

export default function App({Component, pageProps}){
  return(
    <>
      <Head />
      <Sidebar />
      <Component {...pageProps} />
    </>
  )
}

在 Nextjs 中向 _app.js 添加持久化组件

Adding a persistent component to _app.js in Nextjs

javascript

sidebar

reactjs

next.js