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

Question

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

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

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

例如，我想要 URL

/register
/info/*
/about

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

/dashboard
/profile/*
/settings/*

...使用 MainLayout.

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

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

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

谢谢！

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

Answer 1

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

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

然后你会像

一样使用它

const LayoutDashboard = withMainLayout(DashboardComponent);

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

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

How do I use different layouts in Reach Router?

routes

reactjs

react-router

reach-router