Framework7/Framework7-react 动态路由缓存失败

问：

**这是我的路线 React18+framework7**

{ 路径： '/PageContainer/：id'， 组件：PageContainer、 title： 'detail'， },

**我的页面是动态路由。如果我从动态路由 A 跳转到动态路由 B，然后跳转到动态路由 C，则页面将仅缓存动态路由 A。我不确定为什么**在此处输入图像描述

function PageContainer(props) {
  const { f7router } = props;
  useEffect(() => {
    console.log('-----test----');
  }, []);
  const zhibiao3 = () => {
    f7router.navigate(`/PageContainer/orderRealtime?${Math.random() * 10000}`);
  };
  const zhibiao4 = () => {
    f7router.navigate(`/PageContainer/orderHistory?${Math.random() * 10000}`);
  };
  return (
    <AppPage>
      <div className={styles.visibleHidden && headerHeight === 0} />
      <div
        className="centerBox"
        style={{
          height: `calc(100vh - ${headerHeight}px)`,
          overflow: 'scroll',
        }}
      >
        <div onClick={zhibiao3}>进入实时</div>
        <div onClick={zhibiao4}>进入单量</div>
      </div>
    </AppPage>
  );
}

**此为参赛作品**

/* eslint-disable import/no-anonymous-default-export */
import React from 'react';
import { App, View } from 'framework7-react';
import routes from '@/routes';
import '@/App.css';

const f7params = {
  id: 'io.framework7.testapp', // App bundle ID
  name: 'Framework7', // App name
  theme: 'ios', // Automatic theme detection

  pushState: true,
  view: {
    pushState: true,
  },
  routes, // App routes
};

const getViewProps = () => {
  const p = {
    main: true,
    url: '/',
  };
  if (process.env.NODE_ENV === 'development') {
    p.browserHistory = true;
  }
  return p;
};

export default () => {
  return (
    <App {...f7params} store={store} material>
      <View {...getViewProps()} />
    </App>
  );
};

我希望从 A 到 B 再到 C 的动态路由，并缓存所有 A 和 B