3

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

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

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

例如，我想要 URL

/register
/info/*
/about

...使用BeforeLogin布局组件（作为子组件），以及

/dashboard
/profile/*
/settings/*

...使用MainLayout。

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

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

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

谢谢！

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

4

1 回答 1

1

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

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

然后你会像这样使用它

const LayoutDashboard = withMainLayout(DashboardComponent);

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

于 2019-09-23T07:43:41.480 回答