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 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`: <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> } <h3>Notas de campo</h3> - 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`. 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): <!-- begin snippet: js hide: false console: true babel: true --> <!-- language: lang-js --> 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')); <!-- language: lang-html --> <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> <!-- end snippet --> Espero que esta respuesta sea de ayuda.