0

App.js renders an element from NewNav.tsx. I an trying to conditionally hide the element in App.js. For example I want to hide the element only on a route "/check".

App.js

render() {
     return (
           <NewNav />
)
}

NewNav.tsx

return (
    <Navbar>
    ......
    ......
    ......
    </Navbar>
)
Adhokshaja SR
  • 25
  • 2
  • Does this answer your question? [ReactJs - Conditional Rendering or hiding component](https://stackoverflow.com/questions/53432498/reactjs-conditional-rendering-or-hiding-component) – Sheri Feb 25 '22 at 07:46
  • 1
    You can use react-router-dom useLocation hook – Hamed Tahmasebi Feb 25 '22 at 07:53

2 Answers2

0

This will hide <NewNav /> component when route is /check

render() {
     return (
         window.location.pathname.split('/')[1] !== "check" && <NewNav />
)
}
Guram Khasia
  • 114
  • 4
0

If your goal is to display components based on the route in the url (/check, /login, /register, etc), then you'll need react-router-dom for that. It's better this way than manually checking for the url pathname.

jove0610
  • 664
  • 1
  • 8
  • 16