Gatsby布局组件内部的嵌套路由器



我想知道是否可以在Gatsby布局组件中使用嵌套路由?我知道react reach路由器支持这一点,但我不太确定如何让它在盖茨比内工作。。。

目前,我有一个布局组件,其中包含我的网站标题和侧导航菜单。每个页面都会在布局的正文中正确加载。

我现在正试图在我的一个MDX页面中创建一个选项卡式界面。

是否可以使用嵌套路由器、嵌套布局组件或任何其他机制来避免在更改页面时重新加载整个正文内容(包括选项卡(?

我希望我也能将子页面定义为MDX,并将其引用为每个选项卡的内容,而无需重新加载我的主布局组件或当前周围的页面内容。只是好奇这是否可能,或者我是否应该尝试采取不同的方法。

当前布局层次结构

<Root>
/* AppLayout is static around ALL pages and contains header, navigation, and footer */
<AppLayout>
/* PageLayout is the wrapper around each MDX page content (which I want to contain the tabs) */
<PageLayout>
{MDX page content}
</PageLayout>
</AppLayout>
</Root>

目前,当我导航到其他页面时(即使使用<Link>组件(,<PageLayout>会重新渲染,而<AppLayout>不会。这对我来说确实有意义,因为每个页面都应该替换<AppLayout>的内容,但我很好奇是否有一种方法可以重构它或使用不同的机制来实现它

我希望<PageLayout>在其内容中包含选项卡,但在切换选项卡时不会重新呈现该特定页面中的其余内容。

据我所知,无论您使用Gatsby还是独立的reach路由器实现,它都应该有效,因为Gatsby的路由从React reach路由扩展而来,添加了一些增强功能。根据他们的文件:

该组件是@reach/router的链接组件的包装器添加了Gatsby特有的有用增强功能。所有道具通过到@reach/router的链接组件。

Gatsby的<Link>组件允许链接到预加载、预取资源中的内部页面,以便在用户使用该组件导航时提取这些页面。当链接在视口中时,我们使用IntersectionObserver获取低优先级请求,然后当用户可能导航到请求的资源时,使用onMouseOver事件触发高优先级请求

最新更新