I have tried to find a solution to this problem without success. So I have a popup view and the idea is to navigate to a new view(component) within the popup using route. This is what I have so far:

This is the Popup component that opens when triggered:

import styled from "styled-components";
import { BrowserRouter as Router, Link as LinkR, Switch, Route } from "react-router-dom";

export const NavBtn = styled(LinkR)`
`;

export default function App(props) {

  return (
    <div className="ms-welcome">
      <LogoWrap>
        <LogoBtn>
          <LogoText>Welcome to the first popup view</LogoText>
        </LogoBtn>
      </LogoWrap>
      <hr />
      <Router>
        <Switch>
          <NavBtn to="/PopupSecondView">
            <NavBtnLink>Next window</NavBtnLink>
          </NavBtn>
          <Route path="/PopupSecondView" component={SecondView} />
        </Switch>
      </Router>
    </div>
  );
}

This is my second popup view(component):

export default function SecondView(props) {
  
    return (
      <div >
        <LogoWrap>
          <LogoBtn>
            <LogoText>Welcome to the second view</LogoText>
          </LogoBtn>
        </LogoWrap>
        <hr />
          <NavBtn>
            <NavBtnLink >Previous window</NavBtnLink>
          </NavBtn>
      </div>
    );
  }

This is my App.js which is not located at the root of my project. It is located inside the same folder as the popup component:

export default function App(props) {

  return (
    <div className="ms-welcome">
      <Router>
        <Switch>
          <Route path="/PopupSecondView" component={SecondView} />
        </Switch>
      </Router>
      <LogoWrap>
        <LogoBtn>
          <AiFillHome />
          <LogoText>Virta</LogoText>
        </LogoBtn>
        <LogoBtn>
          <AiOutlineInfoCircle />
          <LogoText>Info</LogoText>
        </LogoBtn>
        <LogoBtn>
          <VscRefresh />
          <LogoText>Update</LogoText>
        </LogoBtn>
      </LogoWrap>
      <Button
        className="ms-welcome__action"
        buttonType={ButtonType.hero}
        iconProps={{ iconName: "ChevronRight" }}
        onClick={click}
      >
        Open popup dialog window demo
      </Button>

      <hr />
    </div>
  );
}

Help would be highly appreciated!