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> }