子组件的下一个js父路由组件

Posted 2023-02-22

【中文标题】子组件的下一个js父路由组件

【英文标题】：Next js parent route component for children components

【发布时间】：2020-11-19 23:32:00

【问题描述】：

假设我们有一个admin 模块，它有几个页面customize、settings、account。 这些页面中的每一个都应该有一些通用的布局。 侧边栏。

对于标准的 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、_document 模板，但它们对于整个应用程序都是全局的。

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

我不想在路线更改期间重新渲染此侧边栏，因为它对 UX 不利

感谢您提供任何信息！

【参考方案1】：

您可以使用Sidebar 创建Layout 组件。

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

pages
  -customize
  -settings
  -account

每个页面都将被Layout 组件包裹，例如：

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

Layout 本身看起来像：

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

【讨论】：

您也可以使用某种全局布局并使用getInitialProps 传递它。你可以很容易地找到很多这样的例子：dev.to/ozanbolel/layout-persistence-in-next-js-107g

嗨，@igorves。感谢您的回答。是否意味着每次活动子页面发生变化时都会重新渲染侧边栏？

是的，这是s-s-r

你可以根据需要制作一个带状态的单路由页面

是的，但是会重新渲染侧边栏