浏览器路由器问题

Question

我有带有以下格式页面的应用程序。

1. 标题

2. 脚

3. 左侧的导航菜单

4. 正文内容

除了正文内容之外，其他所有内容的页眉，页脚和导航菜单都是静态的。当我单击Nav菜单项时，应该会动态加载主体内容。与视频（React Basics中的路由器）中提到的场景相同-https://www.youtube.com/watch?v=eofpZPRUnP8&index=16&list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS

创建一个包含页眉，页脚，导航菜单和正文的Root组件。根组件应接受应从定义的路由（{this.props.children}）中加载的子组件。 例如，菜单中有-维护，属性等项目。

<Route path={"/"} component={Root}>
  <Route path={"maintenance"} component={maintenance}/>
  <Route path={"properties"} component={properties}/>
</Route>

当用户单击维护时-维护组件作为子组件传递给Root组件。导航菜单中的其他链接也是如此。 但是，使用浏览器路由器，似乎无法维护Root组件并根据定义的路由将子组件作为参数传递。如何使用浏览器路由器实现此设计。