There is a page https://stackblitz.com/edit/react-fjya8s?file=src%2Fcomponents%2FHeader.jsx. It is necessary that the component Accaunt be located on a different page (not on the one on which the Enter component is located (i.e. it should be like on https://metanit.com/web/react/4.1.php) - i.e. the components must be located on different pages ). Tell me how to achieve this.

To achieve the goal, I used the Route tag from library react-router-dom with attributes path and component. I used

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

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

but the Accaunt component is on the same page (visually) as the Enter component.

I am interested in various ways to solve the problem as I am a newbie. I accept any solution to the problem.