Есть код https://codesandbox.io/s/aboutlayout-o3gmd
В Header
расположены роуты, при переходе в /cabinet
отрисовывается компонент <Сabinet/>
, мне нужно сделать так, что при нахождении на роуте /cabinet
у меня бы не отрисовывался <Footer />
,
пытался достать текущий путь с помощью хука const match = useRouteMatch()
, но его нужно вызывать внутри компоненты <Сabinet/>
, а путь мне нужен в компоненте <App/>
, чтобы сделать условие, {match !== /cabinet && <Footer />}
как мне получить текущий роут именно в <App/>
компоненте.
Подскажите пожалуйста.
Вот компонента <App/>
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";
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 />
{/*
{true && <Footer />} // компонент будет отрисован
{false && <Footer />} // компонент не будет отрисован
{(match !== /cabinet) && <Footer />}
*/}
</BrowserRouter>
</>
);
};
export { App };