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还是独立的到达路由器实现，它都应该起作用，因为Gatsby的路由是从React到达路由扩展而来的，并增加了一些增强功能。 According to their documentation：

该组件是@ reach / router的Link组件的包装，添加了针对盖茨比的有用的增强功能。所有道具都通过了到@ reach / router的链接组件。

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

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

1 个答案: