В этом случае вам нужно использовать контейнерный компонент в качестве макета, чтобы сохранить постоянную боковую панель, и отображать только дочерние элементы в ее главной.
Я предполагаю, что следующим является контейнер - давайте измените его следующим образом:
const Container = props => {
const { children } = props;
return (
<div className="row home-container">
<Header />
<div className="col-md-12 pd-0-0" style={style}>
<Sidebar />
</div>
<main>{children}</main>
</div>
);
};
Компоненты, которые вы отправите здесь как дочерние элементы, будут обработаны. Думайте об этом как оболочку HO C для таких компонентов панели инструментов, как Deals, Invoice et c.
. В своем маршрутизаторе определите компонент для обработки переключения маршрутов с помощью макета. Это будет наш собственный маршрут, который отображает наших детей в нашем макете.
const RouteWithLayout = props => {
const { layout: Layout, component: Component, ...rest } = props;
return (
<Route
{...rest}
render={matchProps => (
<Layout>
<Component {...matchProps} />
</Layout>
)}
/>
);
};
Импортируйте ваш контейнер в ваш маршрутизатор (при условии, что мы импортировали его как контейнер), а затем используйте RouteWithLayout, который мы определили вместо Route следующим образом:
<RouteWithLayout
component={Dashboard}
exact
layout={Container}
path="/dashboard/notification"
/>
<RouteWithLayout
component={Profile}
exact
layout={Container}
path="/dashboard/profile"
/>
...
And the rest