How to keep previous pages in Memory?

[chiefcll]

I'm using the router with Solid's universal renderer. When I change pages, I'd like to keep the previous page cached, so when the user navigates back to the previous page, it's reusing the previous created page. I'm looking for direction on how to solve this...

[chiefcll]

So two approaches I'm considering.

1. Nested Routes.
   App + Home + Entity components
   /main/home/entity

Then the entity page would be loaded as a Child of Home and if we go back to /main/home it would remove props.children and things would just work. We'd just have to maintain a lot of additional routes like
/main/browse/entity

Only tricky part I see is navigate would use relative paths './entity' so it appends to current route. But overall this is least complexity

2. Store props.children

In our App we could have listeners for when location changes and store the computed props.children - Then if we have a stored version rather than using props.children we'd use the previously rendered version, ignoring props.children and since we don't access props.children it won't try to render anything. This approach is more flexible but requires a bit more complexity managing routes and cache.

[ryansolid]

Probably worth looking at this issue too: #204

[chiefcll]

OK Was able to use that and get something like this:

<HashRouter
      root={(props) => {
        rootOwner = getOwner();
        return <App {...props} />;
      }}
    >

function Persist(RawComp) {
  let dispose;
  return createRoot((_dispose) => {
    let node;
    dispose = () => {
      console.log("disposing");
      _dispose();
    };
    return (props) => {
      return runWithOwner(rootOwner, () => {
        if (node) {
          node.setFocus();
        } else {
          node = RawComp(props);
        }

        return node;
      });
    };
  }, rootOwner);

Though I'm probably going to go with number 1 as I still need to figure out focus going back.