how to hide a component on specific routes in react.js

this is the screenshot of the app.js file I want to hide my navbar when the route is at some specific routes, I want the logic for hiding the nav be in the app.js:-

export default function App() {

    return (
                <NavBar />
                <Routes />
                <Footer />


As noted regarding the error you mentioned in comments, it’s caused by the BrowerRouter as its being used in the same file.


Moving BrowserRouter one level up will solve as by the time you invoke useLocation() the router also comes into the picture.

So the index.js file should be like

    <App />

Source: stackoverflow