View as Tab with pushState Error

Questions
1

i’m using f7 react for build web mobile app. but having problem when using View as Tab and combine with pushState enable. In my web mobile, we have several tabs: Home | Cart | Transaction | Account. Each tab has different page and it must be accessable both by clicking tab and typing the url.
The problem are:

  • When pushState is disabled -pushState: false-, I can access each different tab page by clicking the tabs, but the url is not changing (always localhost:3000). If I want to change by typing url: http://localhost:3000/#/account -> to move to account tab, it also not working (stay on the same page & tab).

  • When pushState is enabled -pushState:true-, I can access each different tab by typing the url, for example http://localhost:3000/#/account -> move to account tab, but the click tab method doesn’t work.

This is my code snippets: App.js

 const f7params = {
    id: "Web Mobile",
    name: "Web Mobile",
    theme: "auto",
    routes: routes,
    serviceWorker: {
      path: "/service-worker.js",
    },
    stateKernel,
    panel: {
      closeByBackdropClick: false,
    },
    popup: {
      closeByBackdropClick: false,
    },
    view: {
      pushState: false,
      //pushStateRoot: '',
      pushStateSeparator: '#',
    },
  };
<App params={f7params}>
          <Views tabs className="safe-areas">
            <Toolbar tabbar bottom className="home-tabbar">
              <Link
                onClick={() => setActive("home")}
                href=""
                tabLinkActive
                tabLink="#tab-home"
              >
                <img
                  className="home-img-bottom-container"
                  src="./static/home_en.png"
                />
                <span>Beranda</span>
              </Link>
              <Link
                onClick={() => setActive("cart")}
                href=""
                tabLink="#tab-cart"
              >
                <img
                  className="home-img-bottom-container"
                  src="./static/cart_dis.png"
                />
                <span>Keranjang</span>
              </Link>
              <Link
                onClick={() => setActive("transaction")}
                href=""
                tabLink="#tab-transaction"
              >
                <img
                  className="home-img-bottom-container"
                  src="./static/transaction_dis.png"
                />
                <span>Transaksi</span>
              </Link>
              <Link
                onClick={() => setActive("account")}
                href=""
                tabLink="#tab-account"
              >
                <img
                  className="home-img-bottom-container"
                  src="./static/profile_dis.png"
                />
                <span>Akun</span>
              </Link>
            </Toolbar>
            <View
              id="tab-home"
              tab
              tabActive={active === "home" ? true : false}
              url="/"
            />
            <View
              id="tab-cart"
              tab
              tabActive={active === "cart" ? true : false}
              url="/cart"
            />
            <View
              id="tab-transaction"
              tabActive={active === "transaction" ? true : false}
              tab
              url="/transaction"
            />
            <View
              id="tab-account"
              tab
              tabActive={active === "account" ? true : false}
              url="/account"
            />
          </Views>
        </App>

Anyone can help?

2

Nope, pushState for Views as Tabs is not supported

1 Like