Preserve/cache page state for back/forward navigations a la <Activity>

[xandris]

Hi we have a page with an expandable tree view of organizations. You can drill down to offices in each organization, but you can get to an office other ways, so it's a sibling page to the organization tree. The tree view has an expansion state and each node is lazily populated so there's also fetched data. When you navigate forward and back, the expansion state and fetched data are lost. I'd rather the route component be shelved as if i could wrap it in <Activity mode='hidden'> when the route is inactive or mode='visible' when active. It's worth the RAM to keep the state and virtual DOM loaded. There is a certain point where it's reasonable to drop the activity and start fresh but the use case of going back and forth should be quick.

Can I "shelve" a route component in React Router v8? Failing that, does anyone have a workaround? I achieved this effect with another route by making it a parent page that can display a child route if there is one:

const Parent = () => {
  const outlet = useOutlet()
  return <>
    {outlet}
    <Activity mode={outlet == null ? 'visible' : 'hidden'}>
      Parent content here...
    </Activity>
  </>
}

and the child route is a copy of another route

// I don't know why but * re-export doesn't work here
export { default, loader } from './some.other.route.tsx' 

I can keep doing this but the URLs start looking weird.

Thank you very much for any help ❤️

[IlyaKhalafi]

I have not verified a built-in route-shelving API. For a layout-based workaround, you can keep your URLs flat by making both pages children of a shared pathless layout. Move the tree UI into that layout rather than into the organizations route's outlet.

// routes.ts
import { layout, route } from "@react-router/dev/routes";

export default [
  layout("./tree-layout.tsx", [
    route("organizations", "./organizations.tsx"),
    route("offices/:id", "./office.tsx"),
  ]),
];

// tree-layout.tsx
import { Activity } from "react";
import { Outlet, useMatch } from "react-router";
import OrganizationTree from "./organization-tree";

export default function TreeLayout() {
  const showTree = useMatch("/organizations") !== null;
  return <>
    <Activity mode={showTree ? "visible" : "hidden"}>
      <OrganizationTree />
    </Activity>
    <Outlet />
  </>;
}

organizations.tsx can return null. The office route keeps its own component and loader, and its URL remains /offices/123. Move any tree-specific loader data ownership to the shared layout or a cache so the tree does not depend on an inactive child route's loader.

I checked the equivalent Data Mode route structure with React Router 8.4.0 and React 19.3.1 in JSDOM. Expansion and synthetic fetched-node state survived organization → office → back. The ordinary sibling-route control lost both. I did not build a Framework Mode app.

The tree survives while this layout stays mounted. Also, Activity cleans up and recreates effects when hidden and shown, so an unconditional fetch effect can still refetch. Loader revalidation remains a separate concern.