reactjs - 如何在 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，然后只包装所需的组件。