子组件的下一个js父路由组件 [英] Next js parent route component for children components

问题描述

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

对于标准的 React 应用程序，我会做接下来的事情来实现应用程序的这一部分.

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

一个小例子:

 const Customize = () =><div><h1>自定义</h1></div>;常量设置 = () =><div><h1>设置</h1></div>;const Account = () =><div><h1>账户</h1></div>const Sidebar = () =>(<h2>前端</h2><p><Link to="/admin>>Admin</Link></p><p><Link to="/admin/customize>自定义</Link></p><p><Link to="/admin/settings>设置</Link></p><p><Link to="/admin/account">Account</Link></p>);const Admin=道具=>{返回 (
<侧边栏/><开关><路由路径='/user'组件={自定义}/><路由路径='/user'组件={设置}/><Route path='/user'组件={Account}/></开关><footer>底部</footer></div>);}

但是在 Next.js 的情况下我们怎么做呢?根据他们的文档，我们需要使用文件结构模式.例如.在 pages 文件夹中创建一个管理页面，并将 Account、Customize、Settings 放入此文件夹.要共享一些布局，我们可以使用全局 _app、_document 模板，但它们对于整个应用程序都是全局的.

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

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

感谢您提供任何信息！

解决方案

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

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

页面-定制-设置-帐户

并且每个页面都将被 Layout 组件包裹，例如:

const Customize = () =>(<布局>[页面内容]</布局>)

Layout 本身看起来像:

const Layout = ({ children }) =>(<><侧边栏/>{孩子们}</>)

Let's imagine we have the admin module that has a few pages customize, settings, account. Each of these pages should have some common layout for ex. sidebar.

In the case of a standard React app I would do the next thing to implement this part of the app.

I'd create the Parent route - admin and would create the parent Component that would contain a Sidebar and an entry point for children routes. Each child routed would have its own component and the parent will render the Sidebar and an Active Child component together. A very cool benefit of this approach - the Sidebar will be rendered only once while children will be dynamically changing during the user interaction.

A small example:

    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>
      );
    }

But how can we do it in the case of Next.js? Based on their docs we need to use the File structure pattern. Eg. create an Admin page in the pages folder and put Account, Customize, Settings into this folder. To share some layout we can use the global _app, _document templates but they are global for the whole app.

How can I create the Parent route entry component that should keep Sidebar for all its children?

I don't want to re-render this Sidebar during the route changes because it isn't good regarding UX

Thanks for any info!

解决方案

You can create the Layout component with the Sidebar.

Your pages folder structure gonna look like this:

pages
  -customize
  -settings
  -account

and every of this pages will be wrapped by the Layout component like:

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

and the Layout itself looks like:

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

这篇关于子组件的下一个js父路由组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！