0

I want to be visible only during '/checkout' and '/' instead of in the whole path. it is being difficult to do in react reuter dom v6.

import React from "react";
import "./App.css";
import Header from "./Header";
import Home from "./Home";
import Checkout from "./Checkout";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Login from "./Login";

function App() {
  return (
    // BEM
    <BrowserRouter>
      <div className="app">
        <Header />
        <Routes>
          <Route path="/" element={<Home />}></Route>
          <Route path="/checkout" element={<Checkout />}></Route>
          <Route path="/login" element={<Login />}></Route>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;
Vishal Mishra
  • 131
  • 4
  • 11

2 Answers2

0

You can use useLocation() hook in Header component and check pathname for needed conditions for rendering.

Header.js

  import { useLocation } from "react-router-dom";
  ....
  const { pathname } = useLocation();

JSX

return (
  <div>
     {!pathname.includes("login") && <div>Not Login page</div>}
  </div>
)
Vitaliy Rayets
  • 2,299
  • 1
  • 6
  • 12
0

On react-router v6 you can make Layout for specific routes. You can add <Outlet/> to detect all route child like code below. Documentation React-Router

function App() {
  return (
    // BEM
    <BrowserRouter>
      <div className="app">
        <Routes>
          <Route path="/" element={<Layout/>}>
               <Route path="/" element={<Home />}></Route>
               <Route path="/checkout" element={<Checkout />}></Route>
          </Route>
          <Route path="/login" element={<Login />}></Route>
        </Routes>
      </div>
    </BrowserRouter>
  );
}

Code for Layout.jsx

import {Outlet} from "react-router"

const Layout = () => {

    return (
        <>
            <Header/>
            <Outlet/>
        </>
    )
}

export default Layout;
wisnuaryadipa
  • 710
  • 1
  • 10
  • 18