Реагировать маршрут без обновления страницы

Question

У меня есть структура ниже для 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>

Все работает, как и ожидалось, если вы нажмете Page1 на боковой панели, она загружает Page1, если вы нажмете Page2 загружает страницу 2 и т. Д ...

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

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

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

Answer 1

Вы должны использовать компонент LInk, а не a, если вы хотите, чтобы браузер-маршрутизатор управлял вашей навигацией, как показано здесь.

https://reacttraining.com/react-router/web/api/Link/to-string

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>