CODEWITHSUNDEEP
javascriptreactjsreact-hooksreact-routerreact-router-dom
Nick
Nick

Reputation: 133

How to hide the Footer component at a specific URL

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

Upvotes: 0

Views: 872

Answers (1)

Asif vora
Asif vora

Reputation: 3359

You can use useLocation() hook to check the route path in the <Footer /> component.

Example :

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

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

Upvotes: 1

Related Questions