How to wrap @react-stately/collections's <Item/> (and preserve key)

[jrmyio]

I am experimenting to combine @react-aria/tabs and @react-stately/tabs with react-router but I am running into issues with the @react-stately/collections's <Item/> api.

I tried wrapping the component by doing the following:

const ItemRoute = ({
    children,
    title,
    to,
    ...rest
}: ItemProps<any> & {
    to: string;
}) => {
    return (
        <Item key={to} title={title} {...rest}>
            <Route path={to} element={<>{children}</>} />
        </Item>
    );
};

But this throws an error

The following would throw an error:
Unknown element <ItemRoute> in collection.

I then tried some custom logic by using the parent to loop trough the custom <WrappedItem/>s but by using such solution react is going to add a $. prefix to all the keys whenever you use React.Children.toArray(children).map. Since the tab API is using these keys for things like setSelectedKey they are no longer the identifier you expected them to be.

So I am wondering, is there any better solution to wrap an <Item/>, or are there any methods where you could preserve the key?

I can imagine from an API standpoint it's very convenient to use key for multiple purposes (being a react's key, and as an identifier) but was considered that react may change the key whenever an element is cloned?

[snowystinger]

We intend for Item to be the outermost in React Spectrum components.
If you're using our hooks though, you would probably want to create your own Item components. You could look at how we construct various Item components in order to make your own https://github.com/adobe/react-spectrum/search?q=getCollectionNode

In this particular case though, we’d recommend using the programmatic API to navigate between routes in onSelectionChange

[angusd3v]

@snowystinger Would that not break expected behaviour like being able to right click to open in new tab, CMD+Click, or see the path of the link being visited in the bottom left of the browser window?