React: Hide a Component on a specific Route

Question

New to React:

I have a <Header /> Component that I want to hide only when the user visit a specific page.

The way I designed my app so far is that the <Header /> Component is not re-rendered when navigating, only the page content is, so it gives a really smooth experience.

I tried to re-render the header for every route, that would make it easy to hide, but I get that ugly re-rendering glitch each time I navigate.

So basically, is there a way to re-render a component only when going in and out of a specific route ?

If not, what would be the best practice to achieve this goal ?

App.js:

class App extends Component {

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Frame>
            <Canvas />
            <Header />
            <Main />
            <NavBar />
          </Frame>
        </div>
      </BrowserRouter>
    );
  }
}

Main.js:

const Main = () => (
  <Switch>
    <Route exact activeClassName="active" path="/" component={Home} />
    <Route exact activeClassName="active" path="/art" component={Art} />
    <Route exact activeClassName="active" path="/about" component={About} />
    <Route exact activeClassName="active" path="/contact" component={Contact} />
  </Switch>
);

Answer 1

I'm new to React too, but came across this problem. A react-router based alternative to the accepted answer would be to use withRouter, which wraps the component you want to hide and provides it with location prop (amongst others).

import { withRouter } from 'react-router-dom';    
const ComponentToHide = (props) => {
  const { location } = props;
  if (location.pathname.match(/routeOnWhichToHideIt/)){
    return null;
  }

  return (
    <ComponentToHideContent/>
  )
}

const ComponentThatHides = withRouter(ComponentToHide);

Note though this caveat from the docs:

withRouter does not subscribe to location changes like React Redux’s connect does for state changes. Instead, re-renders after location changes propagate out from the component. This means that withRouter does not re-render on route transitions unless its parent component re-renders.

This caveat not withstanding, this approach seems to work for me for a very similar use case to the OP's.

Answer 2

Since React Router 5.1 there is the hook useLocation, which lets you easily access the current location.

import { useLocation } from 'react-router-dom'

function HeaderView() {
  let location = useLocation();
  console.log(location.pathname);
  return <span>Path : {location.pathname}</span>
}

Answer 3

You could add it to all routes (by declaring a non exact path) and hide it in your specific path:

<Route path='/' component={Header} /> // note, no exact={true}

then in Header render method:

render() {
  const {match: {url}} = this.props;

  if(url.startWith('/your-no-header-path') {
    return null;
  } else {
    // your existing render login
  }
}

Answer 4

You can rely on state to do the re-rendering.

If you navigate from route shouldHide then this.setState({ hide: true })

You can wrap your <Header> in the render with a conditional:

{
  !this.state.hide &&
  <Header>
}

Or you can use a function:

_header = () => {
  const { hide } = this.state
  if (hide) return null
  return (
    <Header />
  )
}

And in the render method:

{this._header()}

I haven't tried react-router, but something like this might work:

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      hide: false
    }
  }

  toggleHeader = () => {
    const { hide } = this.state
    this.setState({ hide: !hide  })
  }

  render() {

    const Main = () => (
      <Switch>
        <Route exact activeClassName="active" path="/" component={Home} />
        <Route
          exact
          activeClassName="active"
          path="/art"
          render={(props) => <Art toggleHeader={this.toggleHeader} />}
        />
        <Route exact activeClassName="active" path="/about" component={About} />
        <Route exact activeClassName="active" path="/contact" component={Contact} />
      </Switch>
    );

    return (
      <BrowserRouter>
        <div className="App">
          <Frame>
            <Canvas />
            <Header />
            <Main />
            <NavBar />
          </Frame>
        </div>
      </BrowserRouter>
    );
  }
}

And you need to manually call the function inside Art:

this.props.hideHeader()

Answer 5

{location.pathname !== '/page-you-dont-want' && <YourComponent />}

This will check the path name if it is NOT page that you DO NOT want the component to appear, it will NOT display it, otherwise is WILL display it.

Answer 6

Visibility handler reusable approach

// VisibilityHandler.js
import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";

export const VisibilityHandler = ({children, notAllowedRoute}) => {

    const location = useLocation();
    const [isVisiable, setIsVisiable] = useState(null);

    const notEmtpy = arr => arr.some( el => el === null );
    const allowed = ( arr ) => {
        let res = notEmtpy(arr.map((path) => location.pathname.match(path) ));
        if(!res) return null
        return true
    }

    useEffect( ()=> {
        setIsVisiable(allowed(notAllowedRoute));
    }, [location, window.location])

    return (
        <>
          { isVisiable && children }
        </>
    )
}

// App.js
<VisibilityHandler notAllowedRoute={["dont-show-on-this-route", "/another-route"]}>
    <h1>Your content goes here</h1>
</VisibilityHandler>