Skip to main content
4 de 5
se eliminó 1 carácter en el cuerpo
g.4
  • 3.5k
  • 2
  • 11
  • 22

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 componente PerfilAdmin, se envuelve en el hook useEffect; esto con la finalidad de notificar a ReactJS, que cuando PerfilAdmin se desmonte, se regrese el estado de la variable footerFlag a su confguracion inicial, la cual devuelve el componente FooterComponent por defecto.
  • Esta solución, se puede usar para cualquier componente tipo Route, cuando no se requiera devolver FooterComponent.

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.

g.4
  • 3.5k
  • 2
  • 11
  • 22