如何在 Reach Router 中使用不同的布局？

Question

我有一个应用程序，其中有N 不同的布局（例如BeforeLogin、MainLayout、SomeElseLayout 等）。

每个布局都是一个 HTML 标记组件，应该包装一个页面组件，例如 Settings、Profile 等。

我需要能够为我的每条路线（或一组路线）分配特定的布局。

例如，我想要网址

/register
/info/*
/about

... 使用BeforeLogin 布局组件（作为子组件），并且

/dashboard
/profile/*
/settings/*

...使用MainLayout。

此外，某些 URL（例如 /）可能会在用户登录之前使用一种布局，而在用户登录之后使用另一种布局。但是，我认为，一旦主要问题得到解答，就可以通过条件渲染来实现。

所以问题是 - 我该怎么做？

（当然，除了显式渲染每个页面组件中的布局，我更希望我的组件与布局无关）

谢谢！

附：对于那些错过的人，问题是关于Reach router，而不是React Router。

Answer 1

您可以轻松创建多个HOC，其中每个都代表您的布局组件之一。然后你只需用所需的布局包装你想要的组件：

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

然后你会像这样使用它

const LayoutDashboard = withMainLayout(DashboardComponent);

这样您可以创建 X 布局和相应的 HOC，然后只需包装所需的组件。