disable component functionality based on page

Question

I a navigation where the menu items are hidden until you get to a certain point on the page then they show.

This works great on the homepage, because it is a relatively long page. But, some of my other pages are short and do not go past the height of the viewport. So when the page loads there are no navigation menu options and it shows the navigation is blank.

Is there a way in react to say disable a component conditionally according to what layout or page you are on?

Example: In Jekyll you can create an if statement and hide a class or section using somehting like {% if page.layout == 'home' %}hide{% endif %}. Is there an equivalent/similar method when using react?

Code:

import React from 'react';
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false,
      isTop: true,
      width: 0, 
      height: 0
    };
    this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  componentDidMount() {
    this.updateWindowDimensions();
    window.addEventListener('resize', this.updateWindowDimensions);
    document.addEventListener('scroll', () => {
      const isTop = window.scrollY < window.innerHeight - 50;
      if (isTop !== this.state.isTop) {
        this.setState({ isTop })
      }
    });
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateWindowDimensions);
  }

  updateWindowDimensions() {
    this.setState({ width: window.innerWidth, height: window.innerHeight - 50 });
  }

  render() {
    return (
      <div>
        <Navbar color="light" light expand="md">
          <NavbarBrand href="/">Maryland <span>Brand</span></NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem className={this.state.isTop ? 'hide' : 'show fadeIn'}>
                <NavLink className="active" href="/">Our Brand</NavLink>
              </NavItem>
              <NavItem className={this.state.isTop ? 'hide' : 'show fadeIn'}>
                <NavLink href="/">Logos</NavLink>
              </NavItem>
              <NavItem className={this.state.isTop ? 'hide' : 'show fadeIn'}>
                <NavLink href="/">Color</NavLink>
              </NavItem>
              <NavItem className={this.state.isTop ? 'hide' : 'show fadeIn'}>
                <NavLink href="/">Typography</NavLink>
              </NavItem>
              <NavItem className={this.state.isTop ? 'hide' : 'show fadeIn'}>
                <NavLink href="/">Imagery</NavLink>
              </NavItem>
              <NavItem className={this.state.isTop ? 'hide' : 'show fadeIn'}>
                <NavLink href="/">Editorial</NavLink>
              </NavItem>
              <NavItem>
                <NavLink className="red bold uppercase show" href="/">Communicators Toolkit</NavLink>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}

Answer 1

Gatsby comes with reach router, so you can use it to get location.pathname and then render something conditionally.

import React from 'react'
import { Location } from '@reach/router'

const HomepageOnly = () => (
  <Location>
    {({ location }) =>
      location.pathname === '/' ? (
        <p>This is the homepage</p>
      ) : (
        <p>This is not</p>
      )
    }
  </Location>
)

export default HomepageOnly

Codesandbox