用于React Router嵌套路由的渲染特定组件

Question

我正在尝试为我在React中编写的应用程序创建一个cms系统，并且试图为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组件？