Se requiere controlar el componente <FooterComponent />
, de tal forma que ReactJS lo devuelva o lo oculte:
este componente FooterComponent, NO quiero que se renderice cuando se renderiza el componente perfilAdmin(o en cualquier ruta que no requiera el footer).
Otra solución práctica, puede ser usar una bandera de estado footerFlag
en el componente principal:
//App
const [footerFlag, setFooterFlag] = useState(true);
Luego, footerFlag
se pasa como props
a <FooterComponent />
:
<FooterComponent footerFlag={footerFlag} />
Con esta bandera se controla si FooterComponent
se devuelve o no, con ayuda de un operador condicional ternario:
function FooterComponent({footerFlag}){
return (
(footerFlag) ? <h3>Muestra FooterComponent</h3>: null
);
}
Ahora, cuando la app
requiera ocultar el componente FooterComponent
, se puede pasar la función handler setFooterFlag
a algúna ruta en específico, esto por medio de la propiedad render
del componente Route
; aquí se muestra la configuración para el componente PerfilAdmin
:
<Route path="/perfil/perfiladmin" render={(props)=>{
return <PerfilAdmin {...props} handle={setFooterFlag}/>
}}/>
Finalmente, se usa la función setFooterFlag
dentro del componente donde se requiera ocultar FooterComponent
, en este ejemplo se muestra el uso para el componente PerfilAdmin
:
function PerfilAdmin({handle}){
useEffect(()=>{
handle(false);
return () => handle(true);
},[]);
return <h3>In Perfil Admin</h3>
}
Notas de campo
- Nótese que la función
setFooterFlag
que se recíbe en el componentePerfilAdmin
, se envuelve en el hookuseEffect
; esto con la finalidad de notificar a ReactJS, que cuandoPerfilAdmin
se desmonte, se regrese el estado de la variablefooterFlag
a su confguracion inicial, la cual devuelve el componenteFooterComponent
por defecto. - Esta solución, se puede usar para cualquier componente tipo
Route
, cuando no se requiera devolverFooterComponent
.
Aquí, un ejemplo demostrando esta implementación, correlo en página completa (Hay unos warnings generados por la herramienta de código S.O. que no pude ocultar):
const Route = window.ReactRouterDOM.Route;
const Link = window.ReactRouterDOM.Link;
const Switch = window.ReactRouterDOM.Switch;
function App(){
const [footerFlag, setFooterFlag] = React.useState(true);
return(
<div>
<ReactRouterDOM.HashRouter>
<Header />
<Link to="/home">- Home - </Link>
<Link to="/convocatoria/123">Convocatoria - </Link>
<Link to="/perfiles">Perfiles - </Link>
<Link to="/perfil/perfiladmin">perfil/admin -</Link>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/home" exact component={Home} />
<Route path="/convocatoria/:id" component={Convocatoria} />
<Route path="/perfiles" exact component={Perfiles} />
{/*<Route path="/perfil/perfiladmin" component={PerfilAdmin} />*/}
<Route path="/perfil/perfiladmin" render={(props)=>{
return <PerfilAdmin {...props} handle={setFooterFlag}/>}
}/>
</Switch>
<Footer footerFlag={footerFlag} />
</ReactRouterDOM.HashRouter>
</div>
);
};
function Home(){
return <h3>In Home</h3>
}
function Convocatoria(){
return <h3>In Convocatoria</h3>
}
function Perfiles(){
return <h3>In Perfiles</h3>
}
function PerfilAdmin({handle}){
React.useEffect(()=>{
handle(false);
return () => handle(true);
},[]);
return <h3>In Perfil Admin</h3>
}
function Header(){
return <h3>In Header</h3>
}
function Footer({footerFlag}){
//console.log("flag from props:",footerFlag);
return (footerFlag) ? <h3>In Footer</h3>: null;
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
<script src='https://unpkg.com/[email protected]/umd/react-router.min.js'></script>
<script src='https://unpkg.com/[email protected]/umd/react-router-dom.min.js'></script>
<script src='https://unpkg.com/[email protected]/babel.js'></script>
<div id="root"></div>
Espero que esta respuesta sea de ayuda.