× TypeError: Cannot read property 'pathname' of undefined

Question

I have the following problem trying to hide the header, footer and aside for my login page

this is my code:

import React, { Component } from 'react';
import Header from './components/Header';
import Footer from './components/Footer';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import Routes from './routes';


    export default class App extends Component {
      render(){
    
        return(
        <div>
        {this.location.pathname==='/Login' ? null:
        <div>
            <Header/>
            <Routes />
            <Footer />
        </div>
        }
        </div>
        )
      }
    }

I get this error message TypeError: Cannot read property 'pathname' of undefined

How can I prevent my header, aside, footer from being shown on my login page?

Helpe please.

Did you Google this? There's a whole bunch of posts on SO about hiding stuff on certain routes. Here's top search result as an example: https://stackoverflow.com/questions/50777333/react-hide-a-component-on-a-specific-route — Jayce444, Oct 29 '20 at 05:58
Does this answer your question? [React: this.props.location.pathname is undefined](https://stackoverflow.com/questions/62215266/react-this-props-location-pathname-is-undefined) — Sarun UK, Oct 29 '20 at 05:59
You need to use this `this.props.location.pathname`. `location` object is available via props — Shubham Verma, Oct 29 '20 at 06:00

score 0 · Answer 1 · answered Oct 29 '20 at 06:51

Issue(s)

pathname is undefined because you've not correctly accessed it from the (presumably) passed location prop from route props. You've missed the props part.

this.location.pathname

It also appears you are attempting to read Route state from App. In order for route props to work you need to wrap your App component in a Router higher up in the react tree and render App into a Route, wrap App with the withRouter Higher Order Component, or render a Router in App and render your header and footer into routes so they can check the location.

Solution

Render a Router around the app content. Render the header and footer into routes on the render prop and check the location.pathname and conditionally render each.

export default class App extends Component {
  render() {
    return (
      <Router>
        <Route
          render={(props) =>
            location.pathname !== "/Login" ? <Header /> : null
          }
        />
        <Routes />
        <Route
          render={(props) =>
            location.pathname !== "/Login" ? <Footer /> : null
          }
        />
      </Router>
    );
  }
}

Alternative solution

Similar to above but defer the location.pathname check to the components. Render the header and footer on the component prop and check the passed route props.

export default class App extends Component {
  render() {
    return (
      <Router>
        <Route component={Header} />
        <Routes />
        <Route component={Footer} />
      </Router>
    );
  }
}

Example check in Header

const Header = ({ location }) => {
  ...
  return location.pathname !== "/login" ? (
    ... // header UI JSX
  ) : null;
};

× TypeError: Cannot read property 'pathname' of undefined

1 Answers1

Issue(s)

Solution

Alternative solution

Linked