He intentado encontrar una solución a este problema sin éxito. Así que tengo una vista emergente y la idea es navegar a una nueva vista (componente) dentro de la ventana emergente usando la ruta. Esto es lo que tengo hasta ahora:

Este es el componente emergente que se abre cuando se activa:

 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> ); }

Esta es mi segunda vista emergente (componente):

 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> ); }

Este es mi App.js que no se encuentra en la raíz de mi proyecto. Se encuentra dentro de la misma carpeta que el componente emergente:

 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> ); }

¡La ayuda sería muy apreciada!