window.location.pathname not working as expected in react

Question

I have this code where I want to hide the header from specific components like the login and register one. I've done this by using the window.location.pathname. It works for the login component but for the register one it doesn't work because the header is shown.

import './App.css';
import './index.css'
import App from './App'
import Main from './main.js'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import Dashboard from './dashboard.js'
import Clients from './Clients.js'
import AddClient from './clientform.js'
import EditClient from './editclient.js'
import Landing from './landing.js'
import AddDiet from './addDiet.js'
import CalendarSection from './calendar.js'
import Login from './login.js'
import { useAuth0 } from "@auth0/auth0-react";
import Register from './register.js'



export default function MainApp() {

  let HideHeader = window.location.pathname === '/login' && '/register' ? null : <Main />

  return (
        <Router>
          {HideHeader}
      <Switch>
      <Route path="/login">
          <Login />
        </Route>
        <Route exact path="/register">
          <Register />
        </Route>
        <Route exact path="/dashboard">
        <Dashboard />
        </Route>
        <Route exact path="/Clients">
        <Clients />
        </Route>
        <Route exact path="/addClient">
          <AddClient />
        </Route>
        <Route exact path="/Calendar">
          <CalendarSection />
        </Route>
        <Route exact path="/Clients/:id">
          <EditClient />
        </Route>
        <Route exact path="/Clients/:id/addDiet">
          <AddDiet />
        </Route>
      </Switch>    
      </Router>
  )
  }

I guess the problem might be the changing of `window.location` does not trigger re-rendering of `MainApp` itself. Does this help https://stackoverflow.com/questions/50777333/react-hide-a-component-on-a-specific-route/? — Dummmy, Aug 31 '21 at 10:44
`window.location.pathname === '/login' && '/register'` This is always `true`. You can't compare a variable to two values like that. The easiest way would be `['/login', '/register'].inclues(window.location.pathname)` — Roberto Zvjerković, Aug 31 '21 at 10:47

Ryan Le · Accepted Answer · 2021-08-31T10:54:30.403

You would need to do a few changes to your condition:

First, it's an OR not an AND condition according to your needs.
Second, You will need to check it again after an OR condition.

The reason that your login is working is that the first clause returns true and the string "/register" alone also means true.

The same applies when you are on the register page but this time the first clause is falsy.

And the

So, it should end up like this:

let HideHeader = window.location.pathname === '/login' || window.location.pathname === '/register' ? null : <Main />

OR even better with this object destructuring:

const { pathname } = window.location;
const HideHeaer = pathname === '/login' || pathname === '/register' ? null : <Main />

window.location.pathname not working as expected in react

1 Answers1

You would need to do a few changes to your condition: