React: Hide a Component on a specific Route

Question

New to React:

I have a

Component that I want to hide only when the user visit a specific page.

The way I des

Answer 1

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

in the render with a conditional:

{
  !this.state.hide &&
  

}

Or you can use a function:

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

  )
}

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 = () => (
      
        
         }
        />
        
        
      
    );

    return (
      
        

          
            
            

            

            
          
        
      
    );
  }
}

And you need to manually call the function inside Art:

this.props.hideHeader()