Как скрыть компонент Footer при определенном URL

Question

Есть код 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 };

Answer 1

В том месте, где выводится Footer, нужно добавить Route и использовать его свойство render. Это функция, которая принимает объект со всей информацией по маршруту - там уже можно сделать проверки и решить, что выводить.

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

В целом получается так:

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

БЛОГ НА HUSL

Как скрыть компонент Footer при определенном URL

Ответы (1 шт):