After following the React Router Routing docs at https://nextui.org/docs/guide/routing, I configured everything as shown in the documentation and here are the pictures here:
https://imgur.com/a/NEH7P0d

- NextUIProvider (App.jsx) is inside the Router Component BrowserRouter (main.jsx)
- UseNavigate is being passed a prop inside the <NextUIProvider navigate={navigate} (App.jsx)

Just to test it out because document states now href should not make the page reload when navigating between pages.

Just to test and demonstrate, in (Navbar.jsx) <DropdownItem> as Shop has href=/men which refreshes the page, however <DropdownItem> as Top has a <Link> with href=/men/tops which does not refresh the page (intended). Which I assume shows the Routing was set up properly.

Am I missing something something that I need to do to make the Dropdown href not refresh the page? onClick={() => navigate('/men/tops')} does work btw but it's very redundant.