React router 5，防止组件卸载

Question

I'm building an app and run towards issue that I'm unable to fix -

I'm fetching data from backend and listing it in a component. Component has select dropdown to filter the list. Clicking on item I render the item details component using History and passing parameters with state, like that -

onClick={() =>
          history.push({
            pathname: "/itemdetails",
            state: { item: item },
          })
        }

The problem is that when I go to items detail page, my item list component gets unmounted. So when I go back to it like that (or by browser):

 onClick={() => history.goBack()}

item list component fetch data and render again while I want it to be in exact same state. Ideally remember scroll position, but at least with already rendered list and same selected dropdown.

Here were similar questions, but I didn't find solution for this particular problem. I've read somewhere that nested routes can do the trick, but I can't wrap my head around how to do it yet.

Router in App js looks like that(with omitted parts):

 <Router>
    <Sidebar />
    <Switch>
      <Route path="/home" component={HomeScreen} />
      <Redirect from="/" exact to="/home" />
      <Route path="/items" exact component={ItemsScreen} />
      <Route
        path="/itemsdetails"
        exact
        component={ItemDetailScreen}
      />
    </Switch>
  </Router>

Answer 1

I'm building an app and run towards issue that I'm unable to fix -

I'm fetching data from backend and listing it in a component. Component has select dropdown to filter the list. Clicking on item I render the item details component using History and passing parameters with state, like that -

onClick={() =>
          history.push({
            pathname: "/itemdetails",
            state: { item: item },
          })
        }

The problem is that when I go to items detail page, my item list component gets unmounted. So when I go back to it like that (or by browser):

 onClick={() => history.goBack()}

item list component fetch data and render again while I want it to be in exact same state. Ideally remember scroll position, but at least with already rendered list and same selected dropdown.

Here were similar questions, but I didn't find solution for this particular problem. I've read somewhere that nested routes can do the trick, but I can't wrap my head around how to do it yet.

Router in App js looks like that(with omitted parts):

 <Router>
    <Sidebar />
    <Switch>
      <Route path="/home" component={HomeScreen} />
      <Redirect from="/" exact to="/home" />
      <Route path="/items" exact component={ItemsScreen} />
      <Route
        path="/itemsdetails"
        exact
        component={ItemDetailScreen}
      />
    </Switch>
  </Router>