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>