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?