Маршрутизация реакции. Размещение компонентов на разных страницах

#javascript #reactjs #web #react-redux #react-router-dom

Вопрос:

Там есть страница https://stackblitz.com/edit/react-fjya8s?file=src/components/Header.jsx. Необходимо, чтобы компонент Accaunt был расположен на другой странице (не на той, на которой Enter находится компонент (т. е. он должен быть похож на https://metanit.com/web/react/4.1.php) — т. е. компоненты должны располагаться на разных страницах ). Скажите мне, как этого добиться.

Для достижения цели я использовал Route тег из библиотеки react-router-dom с атрибутами path и component . Я использовал

 const Header = () => {
  return (
    <>
      <Router>
        <Route exact path="/" component={Enter}></Route>

        <Route path="/Accaunt" component={Accaunt}></Route>
      </Router>
    </>
  );
}; 

но Accaunt компонент находится на той же странице (визуально), Enter что и компонент.

Меня интересуют различные способы решения этой проблемы, так как я новичок. Я принимаю любое решение этой проблемы.

Комментарии:

1. @TJBlackman Вам все еще нужна дополнительная информация или этого достаточно?