Code: https://codesandbox.io/s/aboutlayout-o3gmd?file=/src/App.js

In the Header are Routes, when you go to /cabinet render component <Cabinet/>, I need to make it so that when you are on the route /cabinet component <Footer /> should not be rendered

Tried to get the current path using hook const match = useRouteMatch(), but it must be called inside the component <Cabinet/>, but the path I need in the component <App/>, to make a condition, {match !== /cabinet && <Footer />} how do I get the current path is in the <App/> component?

I also wanted to use const match = useRef(window.location.pathname); but it doesn't update

<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 };