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

IT技术 javascript reactjs routes next.js
2021-05-13 06:49:18

让我们假设我们有一个adminmodule,它有几个页面定制设置帐户这些页面中的每一个都应该有一些通用的布局。侧边栏

在标准 React 应用程序的情况下,我会做下一件事情来实现应用程序的这一部分。

我将创建父路由 - admin并将创建包含侧边栏和子路由入口点的父组件每个路由的子组件都有自己的组件,父组件将一起呈现侧边栏和活动子组件。这种方法的一个非常酷的好处 -侧边栏将仅呈现一次,而子项将在用户交互期间动态更改。

一个小例子:

    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个回答

您可以Layout使用Sidebar.

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

pages
  -customize
  -settings
  -account

并且每个页面都将由Layout组件包装,例如:

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

Layout本身的样子:

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