[2.x] Allow custom component on Link "as" prop in React and Vue3

[SuperDJ]

This PR is based on the changes made in #1940 and so all credits should go to @guizoxxv

This has atleast been requested in: #1550, #1654, #1668 and #1746 as well.

Could also solve vuetifyjs/vuetify#11573.

[chasegiunta]

@joetannenbaum Can this be merged?

[SuperDJ]

@joetannenbaum is there anything that needs to be done before this can be merged?

[motionshots]

What's the hold up? All checks seems like have passed, why is this still not merged? It's something that is really needed. Why is this PR being ignored?

[joetannenbaum]

Sorry for the lack of communication here, I've been thinking about this PR for a while now.

While I understand the need being addressed here, I don't think this is the way I'd like to go about solving it for two primary reasons:

• It's a bit opaque, hard to say what props are being spread onto the custom component under the hood from looking at it
• I can see this opening up a can of worms where we're getting a flood of issues such as "Link component doesn't work with UI library X"

I'd rather invert the solution, something like (totally theoretical, still working on this):

const asLink = useAsLink();

return (
   <MyCustomLink {...asLink('/users', { prefetch: true })} />
);

Benefits are:

• You know exactly which props are coming from asLink and can include/exclude them as you wish
• If there are prop collisions, you can alias them in the spread
• Link itself can use this under the hood to ensure behavior is exactly the same

This is on my list of PRs to examine in the next two weeks.

[chasegiunta]

Appreciate the response @joetannenbaum . I tend to think it would operate similarly to Vue's native :is functionality where props would fall through to the custom component. In the rare scenario for a collision, the user could use a 2nd argument: eg

<Link href="/dashboard" :as="Button, { collisionProp: 'value' }">

I'm not fully confident this would be better, just giving another DX alternative that could perhaps keep the same native-feeling behavior as before, while still providing an escape hatch for the rare prop collision scenario. This would also avoid having multiple ways for overriding the Link element.

[pascalbaljet]

I've investigated Joe's proposal today (still WIP), but I'm wondering if anybody is using the router directly to navigate?

<script setup>
import { router } from '@inertiajs/vue3';
</script>

<template>
  <CustomComponent @click="router.visit('/users')"> 
    Users 
  </CustomComponent>
</template>

Even with a solution like useAsLink(), I'd still assume you'd wrap that in a custom component.

[SuperDJ]

@pascalbaljet using it in a wrapper function. One of the reasons being that without an href some default browser behaviour breaks. For example ctrl+click / scrollwheel click won't open in a new tab. The other reason is that the router is required to use persistent layouts. What I'm doing is roughly described here.

[pascalbaljet]

Closed in favor of #2443