me gustaría ocultar el componente de pie de página en alguna página
<div className="App"> <Header setShowMenu={setShowMenu} /> {showMenu ? <Menu navigateTo={navigateTo} setShowMenu={setShowMenu} /> : null} <Main navigateTo={navigateTo} /> <Footer navigateTo={navigateTo} /> </div> <div> <Routes> <Route path="/" element={<HomePage navigateTo={navigateTo} />} /> <Route path="/precard" element={<PreCard />} /> <Route path="/order" element={<Order />} /> <Route path="/contact" element={<Contact />} /> <Route path="/thankspage" element={<ThanksPage navigateTo={navigateTo}/>} /> <Route path="/*" element={<HomePage />} /> </Routes> </div>Nota: El enrutador en index.js
Así que quiero ocultar el pie de página en ./order de pedido
Espero que tengan una solución para mí :)
Puede usar el gancho useLocation() para verificar la ruta de la ruta en el componente <Footer /> y, según el nombre de la pathname , puede representar el componente <Footer /> .
Ejemplo :
import React from "react"; import { useLocation } from "react-router-dom"; const Footer = () => { const { pathname } = useLocation(); console.log(pathname); // you can check a more conditions here if (pathname === "/thanks") return null; return <div className="footer">Footer</div>; }; export { Footer };Aplicación.js
import { Route, Switch, BrowserRouter } from "react-router-dom"; import "./styles.css"; import { Home } from "./pages/Home"; import { Catalog } from "./pages/Catalog"; import { Thanks } from "./pages/Thanks"; import { Header } from "./components/Header"; import { Footer } from "./components/Footer"; import { Page404 } from "./pages/Page404"; const App = () => { return ( <> <BrowserRouter> <Header /> <Switch> <Route path={"/"} exact> <Home /> </Route> <Route path={"/catalog"} exact> <Catalog /> </Route> <Route path={"/thanks"} exact> <Thanks /> </Route> <Route path={"*"}> <Page404 /> </Route> {/* <Redirect to={'/'} /> */} </Switch> <Footer /> </BrowserRouter> </> ); }; export { App };