Skip to main content
se añadieron 12 caracteres en el cuerpo
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22
function PerfilAdmin({handle}){

  useEffect(()=>{
    handle(false);
    return () => handle(true);
  },[][handle]);
  
  return <h3>In Perfil Admin</h3>
}
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>
function PerfilAdmin({handle}){

  useEffect(()=>{
    handle(false);
    return () => handle(true);
  },[]);
  
  return <h3>In Perfil Admin</h3>
}
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>
function PerfilAdmin({handle}){

  useEffect(()=>{
    handle(false);
    return () => handle(true);
  },[handle]);
  
  return <h3>In Perfil Admin</h3>
}
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>
se eliminó 1 carácter en el cuerpo
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22

Ahora, cuando la app requiera esconderocultar 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:

  • NoteseNó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.

Ahora, cuando la app requiera esconder 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:

  • Notese 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.

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:

  • 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.
se añadieron 5 caracteres en el cuerpo
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22

Ahora, cuando la app requiera esconder 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, aqui; aquí se muestra la configuración para el componente PerfilAdmin:

Ahora, cuando la app requiera esconder el componente FooterComponent, se puede pasar la función handler setFooterFlag, a algúna ruta en específico por medio de la propiedad render del componente Route, aqui se muestra la configuración para el componente PerfilAdmin:

Ahora, cuando la app requiera esconder 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:

se añadieron 6 caracteres en el cuerpo
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22
Loading
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22
Loading