React: Hide a Component on a specific Route

by

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.

More Related Contents:

  1. How to push to History in React Router v4?
  2. React : difference between and
  3. How to pass params with history.push/Link/Redirect in react-router v4?
  4. React Router v4 renders multiple routes
  5. How to get history on react-router v4?
  6. How to pass params into link using React router v6?
  7. react router difference between component and render
  8. React Router v4 – How to get current route?
  9. Detect Route Change with react-router
  10. You should not use outside a
  11. Simple Conditional Routing in Reactjs
  12. How do I pass state through React_router?
  13. react router v4 default page(not found page)
  14. React-Router open Link in new tab
  15. Nested Routes not rendering with React Router v4
  16. useNavigate() may be used only in the context of a component
  17. React Router Dom v6 shows active for index as well as other subroutes
  18. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  19. Performing Authentication on Routes with react-router-v4
  20. React router, pass data when navigating programmatically?
  21. react routing is able to handle different url path but tomcat returns 404 not available resources
  22. React Router 4 Nested Routes not rendering
  23. React router 4 does not update view on link, but does on refresh
  24. React router and this.props.children – how to pass state to this.props.children
  25. How to create dynamic route in gatsby
  26. using NavLink with external URL
  27. Children won’t render when using a layout in ReactJS
  28. How to go back to previous route in react-router-dom v6
  29. React Router Navigate pathing
  30. How to remove the hash from the url in react-router

Leave a Comment