How to hide the Footer component under certain URL

[fbio]

There's a code https://codesandbox.io/s/aboutlayout-o3gmd

♪ Header Routes in transition /cabinet component delineated <Сabinet/>♪ I need to make sure that when I'm on the Route /cabinet I wouldn't have painted. <Footer />♪

Trying to get the current path with the cock. const match = useRouteMatch()but it needs to be called inside the components. <Сabinet/>And I need a way in the component. <App/>to make a condition, {match !== /cabinet && <Footer />} How do I get the current roll? <App/> component.

Please.

Component <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>
    &lt;Footer /&gt;

    {/*
    {true &amp;&amp; &lt;Footer /&gt;}  // компонент будет отрисован
    {false &amp;&amp; &lt;Footer /&gt;} // компонент не будет отрисован
    {(match !== /cabinet) &amp;&amp; &lt;Footer /&gt;} 
    */}
  &lt;/BrowserRouter&gt;
&lt;/&gt;

);

};
export { App };

[Oba22]

In the place where it is released FooterI need to add Route and use its properties render♪ This function, which accepts the object with all the information along the route, can already be checked and determined to be removed.

<Route
  render={({ location }) =>
    location.pathname !== "/cabinet" && <Footer />
  }
/>

Overall, this is how:

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>

</Switch>

<Route

render={({ location }) =>

location.pathname !== "/cabinet" && <Footer />

}

/>

</BrowserRouter>

</>

);

};
export { App };