React Route без обновления страницы

У меня есть структура ниже для React

App.js 
-> 
    Skeleton.js 
    ->
        1) Sidebar.js
        2) Content.js
        -> 
            1) Page1.js
            2) Page2.js
            3) Page3.js

Маршрутизация выполняется внутри App.js следующим образом:

<BrowserRouter>
      <Fragment>
      <Route exact path = "/" component = {Skeleton} />  
      <Route path = "/:type" component = {Skeleton} />
    </Fragment>
  </BrowserRouter>

И у меня есть такие элементы боковой панели

<ListItem
  button
  className = {classes.nested}
  component = "a" href = "/Equity-Runs"
>
  <ListItemIcon>
    <DescriptionIcon />
  </ListItemIcon>
  <ListItemText
    className = {classes.child}
    inset
    primary = "Page1"
  />
</ListItem>

Все работает так, как ожидалось, например, если вы нажмете «Страница 1» на боковой панели, она загрузит «Страницу 1», если вы нажмете «Страница 2», загрузится страница 2 и т. д.

Теперь каждый раз, когда вы нажимаете на ссылку внутри боковой панели, страница становится пустой, а затем загружается. Я хотел бы сделать так, чтобы при нажатии на страницы перезагружался только Content.js, поэтому остальная часть страницы не становится пустой и не загружается. Каждый раз, когда вы нажимаете на страницу с боковой панели, меняется только область содержимого.

Я предполагаю, что мне придется переместить логику маршрутизации в файл содержимого, но тогда проблема в том, что мне нужно знать, на какой странице находится пользователь в файлах боковой панели и AppBarPanel. На данный момент у меня не настроен Redux, и я бы не хотел реализовывать это ради этого вопроса.

Примечание. Я действительно не понимаю, почему кто-то может дать отрицательный ответ на этот вопрос, не сказав, что с ним не так.