NavBar Component Example

[section14]

Apologies if this has been highlighted elsewhere, but I'm wondering how I should approach a NavBar component for selecting routes. In ReactRouter or TanStack router, I'd do something like this in App.tsx

<div id='app' className='app-main-grid'>
    <NavBar />
    <div className='content p-4'>
        <Outlet />
    </div>
</div>

Where this component acts as a site template, and the content gets injected into <Outlet /> when a route changes. I understand that wouter's approach is different. So, I might have a <NavBar /> that looks like this:

import Home from 'pages/Home.tsx'
import Users from 'pages/Users.tsx'
import Orders from 'pages/Orders.tsx'

...

<div className='navbar'>
    <Route path="/" component={Home} />
    <Route path="/users" component={Users} />
    <Route path="/orders" component={Orders} />
</div>

And I would need to re-construct the template per page. Using <Users /> as an example:

import NavBar from 'nav/NavBar.tsx'

...

<div id='users-page' className='app-main-grid'>
    <NavBar />
    <div className='content p-4'>
        Users Page Content
    </div>
</div>

The issue here is: There's a circular dependency between NavBar and Users. I'm wondering what the correct approach is here. Should I be leveraging the <Router /> component in this case? Are people creating a NavBar per page? Thanks in advance!