Hide a component in Login in react Routes

Question

I want to hide the <Header/> component when I am in the Login. I've tried to follow Answer to this question but failed. Below is my App.js code

function App() {
      return <React.Fragment>
        <header>
          <Header/>
        </header>
    
        <main>
          <Routes>
            <Route path="/" element={<Login/>} exact/>
            <Route path="/home" element={<Home/>} exact/>
            <Route path="/add" element={<AddBook/>} exact/>
            <Route path="/books" element={<Books/>} exact/>
            <Route path="/about" element={<About/>} exact/>
            <Route path="/login" element={<Login/>} exact/>
            <Route path="/register" element={<Register/>} exact/>
            <Route path="/books/:id" element={<BookDetail/>} exact/>
          </Routes>
    
            
        </main>
      </React.Fragment>
    
    }

MWO · Accepted Answer · 2022-02-17T13:46:32.907

Assuming you are wrapping your App component in a Browserrouter in index.js, I would do something like that using useLocation():

import { useLocation, Routes, Route } from 'react-router-dom'
   

function App() {

    const location = useLocation();

    return <div>
    <header>
    {location.pathname !== '/login' ?
      <Header/>:null
    }
    </header>
        <main>
        <Routes>
            <Route path="/" element={<Login/>} exact/>
            <Route path="/home" element={<Home/>} exact/>
            <Route path="/add" element={<AddBook/>} exact/>
            <Route path="/books" element={<Books/>} exact/>
            <Route path="/about" element={<About/>} exact/>
            <Route path="/login" element={<Login/>} exact/>
            <Route path="/register" element={<Register/>} exact/>
            <Route path="/books/:id" element={<BookDetail/>} exact/>
        </Routes>            
        </main>
    </div>          
    }

export default App

Hide a component in Login in react Routes

1 Answers1