How to design a navbar for an spa in react?

Question

Actually I am new to react js. i use navbars in every component. Eg:

root/
.......
----components/
---------Header.jsx
---------Footer.jsx
----pages/
---------Home.jsx
---------About.jsx
----App.jsx
.......

in App.jsx i use a router to define routes :

<BrowserRouter >
        <Routes>
          <Route exact path="/home" element={< Home />} > </Route>
          <Route exact path='/about' element={< About />}></Route>
        </Routes>
</BrowserRouter>

I reuse the Header and footer in every page(Both home and about pages).

I want the header to be rendered only once like in a single paged application. Only the elements (except header and footer) which are in home and about should be rendered or changed on navigation and the navigation should work(like the address in the search bar should change from /home to /about when clicked on about like that). So sorry if my explanation is confusing and feel free to ask if you don't understand. Thanks in advance:)