Código: https://codesandbox.io/s/aboutlayout-o3gmd?file=/src/App.js
En el Header están Routes , cuando vaya al componente de procesamiento /cabinet <Cabinet/> , debo hacerlo de modo que cuando esté en la ruta, el componente /cabinet <Footer /> no se procese
Intenté obtener la ruta actual usando hook const match = useRouteMatch() , pero debe llamarse dentro del componente <Cabinet/> , pero la ruta que necesito en el componente <App/> , para hacer una condición, {match !== /cabinet && <Footer />} ¿cómo obtengo la ruta actual en el componente <App/> ?
También quería usar const match = useRef(window.location.pathname); pero no se actualiza
<App/> component :
import { Redirect, Route, Switch } from "react-router-dom"; import { BrowserRouter, useRouteMatch } from "react-router-dom"; import "./styles.css"; import { Home } from "./pages/Home"; import { Catalog } from "./pages/Catalog"; import { Cabinet } from "./pages/Cabinet"; import { Header } from "./components/Header"; import { Footer } from "./components/Footer"; import { Page404 } from "./pages/Page404"; import { useRef, useState } from "react"; const App = () => { const match = useRef(window.location.pathname); // const [path, setPath] = useState(window.location.pathname) console.log(match); return ( <> <BrowserRouter> <Header /> <Switch> <Route path={"/"} exact> <Home /> </Route> <Route path={"/catalog"} exact> <Catalog /> </Route> <Route path={"/cabinet"} exact> <Cabinet /> </Route> <Route path={"*"}> <Page404 /> </Route> {/* <Redirect to={'/'} /> */} </Switch> <Footer /> {/* {true && <Footer />} // will be rendered {false && <Footer />} // will not be rendered {(match !== /cabinet) && <Footer />} */} </BrowserRouter> </> ); }; export { App };Puede usar el gancho useLocation() para verificar la ruta de la ruta en el componente <Footer /> .
Ejemplo :
import React from "react"; import { useLocation } from "react-router-dom"; const Footer = ({ path }) => { const { pathname } = useLocation(); console.log(pathname); if (pathname === "/cabinet") return null; return <div className="footer">Footer</div>; }; export { Footer };Aplicación.js
import { Route, Switch } from "react-router-dom"; import { BrowserRouter } from "react-router-dom"; import "./styles.css"; import { Home } from "./pages/Home"; import { Catalog } from "./pages/Catalog"; import { Cabinet } from "./pages/Cabinet"; 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={"/cabinet"} exact> <Cabinet /> </Route> <Route path={"*"}> <Page404 /> </Route> {/* <Redirect to={'/'} /> */} </Switch> <Footer /> </BrowserRouter> </> ); }; export { App };