return (
    <>
        <div className="app">
            <Routes>
                <Route path="/home" element={<Footer lang={lang}/>}>
                    <Route path="apps" element={<Apps selectedApp={selectedApp} lang={lang}/>} />
                    <Route path="lists" element={<Lists selectedList={selectedSinger} lang={lang}/>} />
                    <Route path="options" element={<Options selectedOptions={selectedOptions} lang={lang}>}
                </Route>
            </Routes>
        </div>
    </>
)

This is my currrent code. In , the user is able to scroll down to paginate more records from a database. There is a navigate(“/home/lists”); the user is able to click on.

Once at , when the user presses the back button on their browser, it navigates back to successfully. However, refreshes and the scroll position is reset, the data gotten from the database is reset.

Is there a way to prevent from unloading when using the navigate();?

What I tried: I tried to put the Lists inside of Apps and use a tenery operator inside Apps to render either Lists or Apps.
What I expected: The Apps will preserve it’s stuff since I am loading the still
What actually resulted: The App still unmounted when the tenery operator was false.