Я пытаюсь создать систему CMS для приложения, которое я написал в React, и я пытаюсь отобразить различные компоненты для CMS и основного приложения.
Основное приложение выглядит так:
const App = () => (
<BrowserRouter>
<div>
<Switch>
<Route path="/" component={Page} />
<Route key={uuid()} path="/store/cms" component={CMSContainer} />;
</Switch>
<NotificationContainer />
</div>
</BrowserRouter>
);
Приложение Page выглядит так:
const Page = ({ children }) => (
<div>
<Banner />
<Navbar />
<Route key={key} path="/store" componenet={Store} />
<Route key={key} path="/about" componenet={About} />
<Footer />
</div>
);
CMSContainer:
const Cms = ({ match, logout, history }) => (
<div className="container-fluid" id="wrapper">
<div className="row">
<Sidebar match={match} logout={logout} history={history} />
<main className="col-xs-12 col-sm-8 col-lg-9 col-xl-10 pt-3 pl-4 ml-auto">
<Route name="Dashboard" exact path={`${match.url}/dashboard`} component={Dashboard} icon="fa fa-chart-line" />
<Route name="Products" exact path={`${match.url}/products`} render={props => { return <CmsProductListContainer match={match} />; }} />
<Route name="Hero Images" exact path={`${match.url}/hero-images`} component={Dashboard} icon="fa fa-hat-wizard" />
<Route name="Banner" exact path={`${match.url}/banner`} component={Dashboard} icon="fa fa-bullhorn" />
<Route name="Gallery" exact path={`${match.url}/gallery`} component={Dashboard} icon="fa fa-images" />
<Route name="Categories" exact path={`${match.url}/categories`} component={Dashboard} icon="fa fa-layer-group" />
</main>
</div>
</div>
);
Все эти страницы отображаются нормально, однако, когда визуализируется компонент CMSContainer, маршруты внутри, которые не отображаются, и только визуализация Banner, Navbar и Footer, что не то, что я хочу.
Как заставить его отображать только компонент CMSContainer с его конкретным маршрутом?