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

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 (
        <React.StrictMode>
            <Router>
                <NavBar />
                <Routes />
                <Footer />
            </Router>
        </React.StrictMode>
    );
};

Answer

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

Solution:

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

ReactDOM.render(
  <React.StrictMode>
    <Router>
    <App />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
)