Reactjs Conditionally hide component-CodePudding

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

CodePudding user response：

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

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

CodePudding user response：

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.