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

Question

我想知道是否可以在 Gatsby 布局组件中使用嵌套路由？我知道反应到达路由器支持这一点，但我不太确定如何让它在 Gatsby 中工作......

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

我现在正尝试在我的一个 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>

目前，<PageLayout> 在我导航到其他页面时会重新呈现（即使使用<Link> 组件），<AppLayout> 不会。这对我来说确实有意义，因为每个页面都应该替换 <AppLayout> 的内容，但我很好奇是否有办法重组它或使用不同的机制来实现它。

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

Answer 1

据我所知，无论您使用 Gatsby 还是独立的reach-router 实现，它都应该可以工作，因为 Gatsby 的路由从 React 的reach-routing 扩展而来，并添加了一些增强功能。 According to their documentation:

该组件是@reach/router 的 Link 组件的包装器，它 添加了特定于 Gatsby 的有用增强功能。所有道具都通过了 通过 @reach/router 的 Link 组件。

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