Как использовать разные макеты в Reach Router?

Question

У меня есть приложение, в котором у меня есть N различные макеты (например, BeforeLogin, MainLayout, SomeElseLayout и т. Д.).

Каждый макет представляет собой компонент разметки HTML, который долженобернуть компонент страницы, например Settings, Profile и т. д.

Мне нужно иметь возможность назначить конкретный макет для каждого из моих маршрутов (или групп маршрутов).

Например, я хочу, чтобы URL

/register
/info/*
/about

... использовал BeforeLogin компонент макета (быть потомками), а

/dashboard
/profile/*
/settings/*

... использовать MainLayout.

Кроме того, некоторые URL-адреса, например /, могут использовать один макет перед входом пользователя, а другой - после.Но я полагаю, что этого можно будет достичь с помощью условного рендеринга, как только будет дан ответ на главный вопрос.

Итак, вопрос в том, как мне это сделать?

(кроме, конечно, рендеринга макета внутри каждого компонента страницы явно, я бы предпочел, чтобы мои компоненты были независимыми от макета)

Спасибо!

PS Для тех, кто пропустил, вопросо Reach router, а не React Router.

Answer 1

Вы можете легко создать несколько HOC , где каждый из них будет представлять один из компонентов вашего макета.Затем вы просто оберните нужный компонент с нужным макетом:

const withMainLayout = (Component) => (props) => {
    return (
        <MainLayout>
            <Component {...props} />
        </MainLayout>
    )
}

И затем вы будете использовать его как

const LayoutDashboard = withMainLayout(DashboardComponent);

Таким образом, вы можете создать макет X и соответствующие HOC, а затемпросто оберните нужные компоненты.