1

No estoy encontrando la solucion a este problema, resulta que tengo una SPA, que tiene en comun un Navbar y un Footer. El problema es que al momento de ingresar al "Perfil de Admin" me gustaria que NO se renderice el Footer. Hay alguna forma de realizar esto en el componente princpipal APP.JS?. Gracias y saludos a tod@s!.

Este es mi APP.JS

import {BrowserRouter as Router , Route, Switch} from 'react-router-dom';
import {lazy,Suspense} from 'react';
import NavbarComponent from './components/common/NavbarComponent';
import Home from './components/Home/Home';
import Calendario from './components/Calendario/Calendario';
import SelectDay from './components/Calendario/SelectDay';
import Pokemones from './components/Pokemon/Pokemones';
import Convocatoria from './components/Home/Convocatoria';
import Login from './components/Login/Login';
import Registro from './components/Registro';
import Verify from './components/Verify';
import FooterComponent from './components/common/FooterComponent';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import Recovery from './components/RecoveryPass';
import { Change } from './components/RecoveryPass/Recovery';
import Perfiles from './components/Login/Perfiles';
import PerfilAdmin from './components/Login/PerfilAdmin';


function App() {

  return (
    <>
    
    <Router>
    <NavbarComponent />
    <Switch>
    <Route path="/" exact component={Home} />
    <Route path="/home" exact component={Home} />
    <Route path="/convocatoria/:id" component={Convocatoria} />
    <Route path="/pokemones"  exact component={Pokemones} />
    <Route path="/calendario"  exact component={Calendario} />
    <Route path="/calendario/:selectDay"   component={SelectDay} />
    <Route path="/login"  exact component={Login}  />
    <Route path="/registro" exact  component={Registro} />
    <Route path="/verify/:verify_code/:email" exact component={Verify} />
    <Route path="/recovery" exact  component={Recovery} />
    <Route path="/change/:token" exact component={Change} />
    <Route path="/perfiles" exact component={Perfiles} />
    <Route path="/perfil/perfiladmin"  component={PerfilAdmin}  /> 
    </Switch>
       
    {/* siempre a la raiz se le pone el exact(es un boolean) siempre ponerle el exact 
    a los /algo/alguito (ahi llevaria el exact el /algo) */}

    </Router>
    <FooterComponent />
   
    

    
    </>

  );
}

export default App;

Este mi FooterComponent que esta en un componente aparte

import React, { useState } from 'react';

import { MDBCol, MDBContainer, MDBRow, MDBFooter } from "mdbreact";
import App from '../../App';

const FooterComponent = () => {
  const [isOn,setIsOn] = useState(true)

 

    return ( <>
    <MDBFooter color="stylish-color-dark" className="page-footer font-small pt-4 mt-4">
      <MDBContainer fluid className="text-center text-md-left">
        <MDBRow>
          <MDBCol md="6">
            <h5 className="text-uppercase mb-4 mt-3 font-weight-bold">
              Nuestros Servicios
            </h5>
            <p>
              Aca viene una descripcion chica del emprendimiento y datos de contancto bla bla.
              
            </p>
          </MDBCol>
          <hr className="clearfix w-100 d-md-none" />
          <MDBCol md="">
            <h5 className="text-uppercase mb-4 mt-3 font-weight-bold">
              Links
            </h5>
            <ul className="list-unstyled">
              <li>
                <a >Link 1</a>
              </li>
              <li>
                <a>Link 2</a>
              </li>
              <li>
                <a >Link 3</a>
              </li>
              <li>
                <a >Link 4</a>
              </li>
            </ul>
          </MDBCol>
          <hr className="clearfix w-100 d-md-none" />
          <MDBCol md="">
            <h5 className="text-uppercase mb-4 mt-3 font-weight-bold">
              Links
            </h5>
            <ul className="list-unstyled">
              <li>
                <a >Link 1</a>
              </li>
              <li>
                <a >Link 2</a>
              </li>
              <li>
                <a >Link 3</a>
              </li>
              <li>
                <a >Link 4</a>
              </li>
            </ul>
          </MDBCol>
          

        </MDBRow>
      </MDBContainer>
      <hr />
      <div className="text-center py-3">
        <ul className="list-unstyled list-inline mb-0">
          <li className="list-inline-item">
            <h5 className="mb-1">Registrate</h5>
          </li>
          <li className="list-inline-item">
            <a className="btn btn-danger btn-rounded">
             Aqui!
            </a>
          </li>
        </ul>
      </div>
      <hr />
      <div className="text-center">
        <ul className="list-unstyled list-inline">
          <li className="list-inline-item">
            <a className="btn-floating btn-sm btn-fb mx-1">
              <i className="fab fa-facebook-f"> </i>
            </a>
          </li>
          <li className="list-inline-item">
            <a className="btn-floating btn-sm btn-tw mx-1">
              <i className="fab fa-twitter"> </i>
            </a>
          </li>
          <li className="list-inline-item">
            <a className="btn-floating btn-sm btn-gplus mx-1">
              <i className="fab fa-google-plus"> </i>
            </a>
          </li>
          <li className="list-inline-item">
            <a className="btn-floating btn-sm btn-li mx-1">
              <i className="fab fa-linkedin-in"> </i>
            </a>
          </li>
          <li className="list-inline-item">
            <a className="btn-floating btn-sm btn-dribbble mx-1">
              <i className="fab fa-dribbble"> </i>
            </a>
          </li>
        </ul>
      </div>
      <div className="footer-copyright text-center py-3">
        <MDBContainer fluid>
          &copy; {new Date().getFullYear()} Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
        </MDBContainer>
      </div>
    </MDBFooter>
    
    
    
    </> );
}
 
export default FooterComponent;

Bueno espero que se entienda lo que quiero hacer, este componente FooterComponent, NO quiero que se renderice cuando se renderiza el componente perfilAdmin(o en cualquier ruta que no requiera el footer). Vale aclarar que es un proyecto de practica y estudio por eso las incoherencias en rutas nombres y demas, gracias!!!!

2 respuestas 2

2

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);
  },[handle]);
  
  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);
  },[handle]);
  
  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.

3
  • Genial la explicacion y muy explicito. Lo estoy probando ahora y te devuelvo el resultado, se agradece la ayuda, muy bueno! Commented el 1 mar. 2021 a las 13:49
  • Hola! lo estuve probando y la idea es barbara, el tema es que cuando uso el useEffect() al principio me tira que TypeError: handle is not a function. Luego actualizo la pagina y el error deja de exisitr, calculo porque se carga ese useEffect y setea el Footer en false, pero es decir que cada vez que se vuelve a renderizar el componente, el me tira ese error, lo estoy investigando y te digo como quedo!! abrazo Commented el 3 mar. 2021 a las 2:46
  • Verifica que estes pasando la función como prop en el componente PerfilAdmin handle={setFooterFlag}, también verifica que el useEffect este al inicio del mismo, antes que cualquier otra declaración, son reglas que se deben seguir al usar hooks, sigo al pendiente, saludos
    – g.4
    Commented el 3 mar. 2021 a las 5:54
0

Una posible solución sencilla es renderizarlo o no en función de la url, puedes hacerlo así, utilizando el hook useHistory de react-router:

const history = useHistory();

Y donde muestras el componente:

{history.location.pathname.indexOf("perfil/perfiladmin") === -1 && <FooterComponent />}

Otra manera sería por medio de Redux o de un Context controlando con una prop si se tiene que mostrar o no el componente, cuando renderize PerfilAdmin se tendría que setear a false, y cuando se desmonte, volverlo a poner a true y en función de esta prop renderizar o no el FooterComponent

1
  • Si utilizo Redux, pero me parece mas sencilla la forma con el hook useHistory, aun que ahora no me estaria saliendo, como recomendas hacer? dentro del componente FooterComponent? o dentro del App.js? Gracias por la ayuda me sirve mucho Commented el 26 feb. 2021 a las 19:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.