Routable tabs cannot render Framework7 components

1

Using React, Framework7 version 6.0.19

Framework7 React components give errors when rendered in routable tabs. I have tested with Block, Searchbar and with AccordionContent. It renders on the first tab navigated to, then partially on the second tab, afterwhich it gives the following error:

Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.

The errors only occur with Framework7 Components and not with custom components.

Example: frosty-curie-hio3t - CodeSandbox

2

Framework7’s components router here expects exactly one root element, so it happens because of fragment. Just use some div or span instead of fragment