Best way to change screen in React when URL not updated - reactjs

Question

I have an app I'm building in React where the url never updates despite each screen taking up the entire page.
What is the best way to render each screen when it's the screen to be viewed?
export const App = () => {
const [activeScreen, setActiveScreen] = useState("PAGE_1");
const goToScreen2 = () => setActiveScreen("PAGE_2");
const goToScreen3 = () => setActiveScreen("PAGE_3");
return (
<Wrapper>
{activeScreen === "PAGE_1" &&
<Page1 nextScreen={goToScreen2} />
}
{activeScreen === "PAGE_2" &&
<Page2 nextScreen={goToScreen3} />
}
{activeScreen === "PAGE_3" &&
<Page3 />
}
</Wrapper>
);
};

Answer 1

I would do something like this:
function Page1() {
return 'Page 1'
}
function Page2() {
return 'Page 2'
}
function Page3() {
return 'Page 3'
}
function Pager({
next,
prev,
children
}) {
return (
<div>
<button onClick={prev}>Prev</button>
{children}
<button onClick={next}>Next</button>
</div>
)
}
const pages = [Page1, Page2, Page3]
const App = () => {
const [activeScreen, setActiveScreen] = React.useState(0);
const goNext = () => setActiveScreen((activeScreen + 1) % pages.length);
const goBack = () => setActiveScreen((activeScreen - 1 + pages.length) % pages.length);
const ActivePage = pages[activeScreen]
return (
<Pager next={goNext} prev={goBack}>
<ActivePage />
</Pager>
);
};
ReactDOM.render( <App /> , document.querySelector('#root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="root" />