Проблема с Browser Router

Question

У меня есть приложение со страницами в формате ниже.

1. Заголовок

2. Нижний колонтитул

3. Меню навигации на левой стороне

4. Содержание тела

За исключением содержимого тела, остальная часть заголовка, нижнего колонтитула и меню навигации являются статическими. Когда я нажимаю на пункты меню Nav, это должно динамически загружать содержимое тела. Тот же сценарий, что и в видео (Маршрутизаторы в разделе Основы React) - https://www.youtube.com/watch?v=eofpZPRUnP8&index=16&list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS

Создание корневого компонента, включающего верхний и нижний колонтитулы, навигационное меню и текст. Корневой компонент должен принимать дочерний компонент, который должен загружаться с определенного маршрута ({this.props.children}). Например, в меню есть такие пункты, как - обслуживание, свойства ..

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

Когда пользователь щелкает компонент обслуживания - обслуживание передается корневому компоненту как дочерний компонент. Аналогично для других ссылок в меню навигации. Но в браузере маршрутизатора кажется невозможным поддерживать корневой компонент и передавать дочерние компоненты в качестве параметров на основе определенного маршрута. Как добиться этого дизайна с помощью браузера роутера.