React Multipage NavBar reseting its state - reactjs

Question

Trying to set up a simple NavBar using react-bootstrap, I want to maintain in the state the active page, this is the component:
import React, { useState } from 'react';
import { Navbar, Nav } from 'react-bootstrap';
const Navigation = () => {
const [activeItem, setActivePage] = useState("initial");
return (
<>
<Navbar bg="primary" variant="dark">
<Navbar.Brand href="/page1">Navbar</Navbar.Brand>
<Nav activeKey={activeItem} onSelect={(e) => setActivePage(e)} className="mr-auto">
<Nav.Link eventKey="/page1" href="/page1">Page 1</Nav.Link>
<Nav.Link eventKey="/page2" href="/page2">Page 2</Nav.Link>
</Nav>
<p>current: {activeItem}</p>
</Navbar>
</>
)
}
export default Navigation;
And this is the main App.js:
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navigation from './components/Navigation';
import Page1 from './routes/Page1';
import Page2 from './routes/Page2';
const App = () => (
<>
<Router>
<Navigation/>
<Switch>
<Route exact path="/page1" component={Page1}/>
<Route path="/page2" component={Page2}/>
</Switch>
</Router>
</>
);
export default App;
The issue I have is that the activeItem state variable gets reset every time a page loads. So activeItem is "initial" at the very beginning, when I click on a page it briefly changes to the proper eventKey but then immediately returns to "initial" when the page loads so the state is not preserved across page loads, but reset every time.
I'm new to react, already tried going to other posts and react-bootstrap documentation. If I change the href values to stay in the same page (e.g. by making href="#explora") everything works as intended.
What am I missing here to make react keep state in the NavBar across page routing?

Answer 1

You could check into the location object using the useLocation hook, the pathname property which contains the path for the current page and also with this approach you don't need to save the current page in any state. So, having said that your Navigation component it should look like this:
import React, { useState } from 'react';
import { useLocation } from 'react-router-dom';
import { Navbar, Nav } from 'react-bootstrap';
const Navigation = () => {
const location = useLocation();
return (
<>
<Navbar bg="primary" variant="dark">
<Navbar.Brand href="/page1">Navbar</Navbar.Brand>
<Nav activeKey={location.pathname} className="mr-auto">
<Nav.Link href="/page1">Page 1</Nav.Link>
<Nav.Link href="/page2">Page 2</Nav.Link>
</Nav>
<p>current: {location.pathname}</p>
</Navbar>
</>
)
}
export default Navigation;

Answer 2

Have you tried to move the const [activeItem, setActivePage] = useState("initial"); into App.js file?
App.js :
import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navigation from './components/Navigation';
import Page1 from './routes/Page1';
import Page2 from './routes/Page2';
const App = () => (
const [activeItem, setActiveItem] = useState('initial');
<>
<Router>
<Navigation
activeItem={activeItem}
setActiveItem={setActiveItem}
/>
<Switch>
<Route exact path="/page1" component={Page1}/>
<Route path="/page2" component={Page2}/>
</Switch>
</Router>
</>
);
export default App;
Navigation component:
import React, { useState } from 'react';
import { Navbar, Nav } from 'react-bootstrap';
const Navigation = ({ activeItem, setActivePage }) => {
return (
<>
<Navbar bg="primary" variant="dark">
<Navbar.Brand href="/page1">Navbar</Navbar.Brand>
<Nav activeKey={activeItem} onSelect={(e) => setActivePage(e)} className="mr-auto">
<Nav.Link eventKey="/page1" href="/page1">Page 1</Nav.Link>
<Nav.Link eventKey="/page2" href="/page2">Page 2</Nav.Link>
</Nav>
<p>current: {activeItem}</p>
</Navbar>
</>
)
}
export default Navigation;