Вложенный маршрутизатор внутри компонента компоновки Gatsby

Question

Мне интересно, возможно ли использовать вложенные маршруты внутри компонента компоновки Gatsby? Я знаю, что маршрутизатор React Reach поддерживает это, но я не совсем уверен, как заставить его работать в 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>, но мне любопытно, есть ли способ реструктурировать это или использовать другой механизм для достижения этого.

I Я надеюсь, что <PageLayout> будет содержать вкладки в своем содержимом, но не будет иметь остальную часть содержимого в этой указанной c странице, отрисовываемой повторно при переключении вкладок.

Answer 1

Насколько я знаю, он должен работать независимо от того, используете ли вы Gatsby или отдельную реализацию reach-router, потому что маршрутизация Gatsby выходит за пределы React reach-routing, добавляя некоторые улучшения. В соответствии с их документацией :

Компонент является оберткой вокруг компонента Link @ router / router, который добавляет полезные улучшения, специфицирующие c для Gatsby. Все реквизиты передаются в компонент Link @ reach / router.

Компонент Gatsby <Link> позволяет создавать ссылки на внутренние страницы в рамках предварительной загрузки, предварительно выбирая ресурсы так, чтобы они выбирались к тому времени, когда пользователь перемещается с помощью этот компонент. Мы используем IntersectionObserver для извлечения запроса с низким приоритетом, когда ссылка находится в области просмотра, а затем используем событие onMouseOver для запуска запроса с высоким приоритетом, когда существует вероятность того, что пользователь перейдет к запрошенному ресурсу