假设我们有一个 admin
模块,其中有几个页面customize、settings、account。
这些页面中的每一个都应该有一些通用的布局。 边栏。
在标准 React 应用程序的情况下,我将做下一步来实现应用程序的这一部分。
我将创建父路由 - admin 并创建将包含一个 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
文件夹中创建一个管理页面,并将Account、Customize、Settings 放入该文件夹中。
要共享一些布局,我们可以使用全局 _app、_document 模板,但它们对整个应用程序都是全局的。
如何创建应该为其所有子项保留侧边栏的父路由入口组件?
我不想在路由更改期间重新呈现此边栏,因为它对用户体验不好
感谢您提供任何信息!
最佳答案
您可以使用 Sidebar
创建 Layout
组件。
您的页面文件夹结构将如下所示:
pages
-customize
-settings
-account
并且每个页面都将被 Layout
组件包裹起来,如下所示:
const Customize = () => (
<Layout>
[page content]
</Layout>
)
Layout
本身看起来像:
const Layout = ({ children }) => (
<>
<Sidebar />
{children}
</>
)
关于javascript - 子组件的下一个js父路由组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63169473/