Next js 子组件的父路由组件

让我们想象一下我们有admin有几个页面的模块定制, settings, account。 这些页面中的每一个都应该有一些通用的布局。sidebar.

对于标准 React 应用程序，我将做下一步来实现应用程序的这一部分。

我会创建父路线 -admin并会创建包含一个的父组件Sidebar以及儿童路线的入口点。每个路由的子组件都有自己的组件，父组件将一起渲染侧边栏和活动子组件。 这种方法的一个非常酷的好处 -Sidebar仅渲染一次，而子项将在用户交互过程中动态变化。

一个小例子：

    const Customize = () => <div><h1>Customize</h1></div>;
    const Settings = () => <div><h1>Settings</h1></div>;
    const Account = () => <div><h1>Account</h1></div>

    const Sidebar = () => (
       <h2>Frontend</h2>
       <p><Link to="/admin">Admin</Link></p>
       <p><Link to="/admin/customize">Customize</Link></p>
       <p><Link to="/admin/settings">Settings</Link></p>
       <p><Link to="/admin/account">Account</Link></p>
    );
    
    const Admin= props => {
      return (
        <div>
          <Sidebar  />
          <Switch>
            <Route path='/user' component={Customize}/>
            <Route path='/user' component={Settings}/>
            <Route path='/user' component={Account}/>
          </Switch>
          <footer>Bottom</footer>
        </div>
      );
    }

但是对于 Next.js 来说我们该怎么做呢？根据他们的文档，我们需要使用文件结构模式。例如。在中创建一个管理页面pages文件夹并放置帐户、自定义、设置进入这个文件夹。 为了共享一些布局，我们可以使用全局_app, _文档模板，但它们对于整个应用程序来说是全局的。

如何创建应为其所有子级保留侧边栏的父级路由条目组件？

I 不想要在路线更改期间重新渲染此侧边栏，因为这对于用户体验来说不好

感谢您提供任何信息！

您可以创建Layout组件与Sidebar.

您的页面文件夹结构将如下所示：

pages
  -customize
  -settings
  -account

每一页都将被包裹起来Layout组件如：

const Customize = () => (
  <Layout>
    [page content]
  </Layout>
)

and the Layout它本身看起来像：

const Layout = ({ children }) => (
  <>
    <Sidebar />
    {children}
  </>
)