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>
© {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!!!!