Navigating back to original page with original props

[ergunpp]

Hi,
I have developed a web site using gatsby which is fully dynamic and fetches data from our erp system via aws api gateway, lambda and mssql.
For the authentication I am using aws amplify cognito. There is however one issue I could not solve.
For example when a user navigates to a new page from a serach results page and then back, the original search page is refreshed and the user has to enter the search term again, then select the paginated page again to get to the originating status.
Is there an easy way to solve this problem?
Thanks in advance,

[herecydev]

You can track state in a react component, you will want to wrapRootElement to make sure the component is not unmounted.

[ergunpp]

Thank you for your answer.
I have a router and authentication as well my Gatsby-browser file looks like this:

import { Auth } from 'aws-amplify'
import { setUser } from './src/services/auth'


export const onRouteUpdate = (state, page, pages) => {
  Auth.currentAuthenticatedUser()
  .then(user => {
    const userInfo = {
      ...user.attributes,
      username: user.username,
    }
  setUser(userInfo)
  })
  .catch(err => {
    window.localStorage.setItem('gatsbyUser', null)
  })
}

and my Gatsby-node.js file:

exports.onCreatePage = async ({ page, actions }) => {
    const { createPage } = actions
    // Only update the `/app` page.
    if (page.path.match(/^\/app/)) {
      // page.matchPath is a special key that's used for matching pages
      // with corresponding routes only on the client.
      page.matchPath = "/app/*"
      // Update the page.
      createPage(page)
    }
  }

and my app.js file:

const App = () => {

  return (
    <Layout>
      <Router basepath="/app">
        <PrivateRoute path="/order-details/:orderId" component={OrderDetails} />
        <PrivateRoute path="/item-details/:itemId" component={ItemDetails} />
        <PrivateRoute path='/production-orders' component={ProductionOrders} />
        <PrivateRoute path="/production-order-detail/:companyNr/:orderId" component={ProdOrderDetail} />
        <PrivateRoute path="/cards" component={Cards} />
        <PrivateRoute path="/card-details/:cardId" component={CardDetail} />
        <PrivateRoute path="/orders" component={Orders} />
        <PrivateRoute path="orders/cId/:cId" component={Orders} />
        <PrivateRoute path="orders/keyword/:keyword" component={Orders} />
        <PrivateRoute path="/items" component={Items} />
        <PrivateRoute path="/items/keyword/:keyword" component={Items} />
        <Login path="/login" />
        <ForgotPassword path="/forgot-password" />
        <NewPassword path="/new-password" />
        <PrivateRoute path="/profile" component={Profile} />
        <PrivateRoute path="/invoices/" component={Invoices}/>
        <PrivateRoute path="/invoices/cId/:cId" component={Invoices}/>
        <PrivateRoute path="/dispatches/" component={Dispatches}/>
        <PrivateRoute path="/dispatches/cId/:cId" component={Dispatches}/>
        <PrivateRoute path="/invoice-details/:invId" component={InvoiceDetails} />
        <PrivateRoute path="/order-plan" component={OrderPlan} />
      </Router>
    </Layout>
  )
}
export default App

how should I implement the wrapRootElement? I a sorry to ask this question but the documentation on wrapRootElement is very shallow on the link you provided.

Thank you so much.