Is there any way to prevent a page from unmounting when the router changes?

[thedv91]

Is there any way to replicate IonicRouter's behavior in React Router, where pages don't unmount upon router changes? I'm looking to develop a Progressive Web App (PWA) without relying on Ionic.

[puopg]

Yea just do it yourself?

Something like:

import { matchPath } from "react-router-dom";


const [mountedPages, setMountedPages] = useState({});
const location = useLocation();

const isCurrentRouteMatch = (paths: string[]): boolean => {
    const currentPathname =location.pathname;
    const anyPathsMatch = paths.some((path) => {
      const match = matchPath({ path }, currentPathname);

      return Boolean(match);
    });

    return anyPathsMatch;
  };

const renderPage1 = () => {
     const isCurrentRouteMatching = this.isCurrentRouteMatch(["/path1"]);
   
     return <div style={{ display: isCurrentRouteMatching ? "block" : "none" }}><Page1 /></div>
};

useEffect(() => {
   const isCurrentRouteMatching = this.isCurrentRouteMatch(["/path1"]);

  if (isCurrentRouteMatching && !mountedPages["page1"]) {
     setMountedPages({ ...mountedPages, "page1": true});
  }
}, [location]);

return (
  {mountedPages["page1"] && this.renderPage1()}
);

Basically:

1. Watch location changes. (You can use a <Routes> to trigger this if you want a RRv5 <Switch> like feel, or just run a callback when location changes.
2. Figure out if the route ur on should have a page mounted. If so, update state to render the component
3. The component should also take into account the path to discern whether to display none or unset it. (This is how you hide it but keep it mounted)