Quiero crear un enrutamiento para el modal de superposición con la página principal en segundo plano. Al igual que en instagram.com, cuando hace clic en el icono de creación, lo lleva a "/crear/seleccionar" mientras la página principal aún está en segundo plano.
Traté de implementar esto en mi propia página, pero no pareció funcionar, muestra la página completamente nueva en lugar de la página principal.
function Routes(){ return( <Router> <Switch> <Route path = "/login" component = {LoginPage} /> <Route path = "/signup/name" component = {NamePage} /> <Route path = "/signup" component = { SignupPage } /> <MainContainer> <Route path = "/" exact component = {HomePage} /> <Route path = "/explore" component = {Overlay} /> </MainContainer> </Switch> <Route path = "/create" children = {<Overlay />}/> </Router> ) } function MainContainer(props: any){ return( <userContext.Provider value = {currentUser}> <div id = "main-container"> <NavComponent /> <div className = "main-container-right"> <HeaderComponent /> <main id = "container"> {props.children} </main> </div> </div> </userContext.Provider> ) } Funciona cuando elimino exact de la ruta "/", pero quiero la página de cambio de enrutador en "/ explorar". ¿Hay algo que esté haciendo mal aquí?
Si se superpone al componente de fondo (principal), ¿realmente necesita cambiar la ruta de la ruta? Si es así, mi respuesta puede estar incompleta.
Para la superposición, simplemente coloque el componente superpuesto dentro de la función de representación principal. Sin embargo, puede usar el estado del padre para decidir si el hijo o la superposición se representan.
Por ejemplo:
render() { return ( {this.state.overlay === true && <Overlay />} ) }Esto usa una propiedad en el estado llamada superposición, que probablemente debería ser falsa de forma predeterminada. Luego, simplemente use una función en el componente principal para activar/desactivar esto. Puede pasar este conmutador a la función de superposición para cerrar la superposición.