Merge pull request #2089 from Smef/make-link-href-reactive

[2.x] Fix: make Link href prop reactive

packages/react/test-app/Pages/Links/PropUpdate.jsx

@@ -0,0 +1,15 @@
+import { Link } from '@inertiajs/react'
+import { useState } from 'react'
+
+export default () => {
+  const [href, setHref] = useState('/sleep')
+
+  return (
+    <div>
+      <button onClick={() => setHref('/something-else')}>Change URL</button>
+      <Link href={href} class="get">
+        The Link
+      </Link>
+    </div>
+  )
+}

packages/svelte/test-app/Pages/Links/PropUpdate.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { Link } from '@inertiajs/svelte'
+
+  let href = '/sleep';
+
+  const changeUrl = () => {
+    href = '/something-else';
+  }
+</script>
+
+<div>
+  <button on:click={changeUrl}>Change URL</button>
+  <Link href={href} class="get">
+    The Link
+  </Link>
+</div>

packages/vue3/src/link.ts

@@ -10,7 +10,7 @@ import {
   router,
   shouldIntercept,
 } from '@inertiajs/core'
-import { defineComponent, DefineComponent, h, onMounted, onUnmounted, PropType, ref } from 'vue'
+import { computed, defineComponent, DefineComponent, h, onMounted, onUnmounted, PropType, ref } from 'vue'
 
 export interface InertiaLinkProps {
   as?: string
@@ -181,15 +181,19 @@ const Link: InertiaLink = defineComponent({
 
     const method = props.method.toLowerCase() as Method
     const as = method !== 'get' ? 'button' : props.as.toLowerCase()
-    const [href, data] = mergeDataIntoQueryString(method, props.href || '', props.data, props.queryStringArrayFormat)
+    const mergeDataArray = computed(() =>
+      mergeDataIntoQueryString(method, props.href || '', props.data, props.queryStringArrayFormat),
+    )
+    const href = computed(() => mergeDataArray.value[0])
+    const data = computed(() => mergeDataArray.value[1])
 
-    const elProps = {
-      a: { href },
+    const elProps = computed(() => ({
+      a: { href: href.value },
       button: { type: 'button' },
-    }
+    }))
 
     const baseParams = {
-      data: data,
+      data: data.value,
       method: method,
       replace: props.replace,
       preserveScroll: props.preserveScroll,
@@ -219,14 +223,14 @@ const Link: InertiaLink = defineComponent({
     }
 
     const prefetch = () => {
-      router.prefetch(href, baseParams, { cacheFor: cacheForValue })
+      router.prefetch(href.value, baseParams, { cacheFor: cacheForValue })
     }
 
     const regularEvents = {
       onClick: (event) => {
         if (shouldIntercept(event)) {
           event.preventDefault()
-          router.visit(href, visitParams)
+          router.visit(href.value, visitParams)
         }
       },
     }
@@ -252,7 +256,7 @@ const Link: InertiaLink = defineComponent({
       },
       onMouseup: (event) => {
         event.preventDefault()
-        router.visit(href, visitParams)
+        router.visit(href.value, visitParams)
       },
       onClick: (event) => {
         if (shouldIntercept(event)) {
@@ -267,7 +271,7 @@ const Link: InertiaLink = defineComponent({
         as,
         {
           ...attrs,
-          ...(elProps[as] || {}),
+          ...(elProps.value[as] || {}),
           'data-loading': inFlightCount.value > 0 ? '' : undefined,
           ...(() => {
             if (prefetchModes.includes('hover')) {

packages/vue3/test-app/Pages/Links/PropUpdate.vue

@@ -0,0 +1,13 @@
+<script setup>
+import { Link } from '@inertiajs/vue3'
+import { ref } from 'vue'
+
+const href = ref('/sleep')
+</script>
+
+<template>
+  <div>
+    <button @click.prevent="href = '/something-else'">Change URL</button>
+    <Link :href="href">The Link</Link>
+  </div>
+</template>

tests/app/server.js

@@ -72,6 +72,7 @@ app.get('/links/headers/version', (req, res) =>
   inertia.render(req, res, { component: 'Links/Headers', version: 'example-version-header' }),
 )
 app.get('/links/data-loading', (req, res) => inertia.render(req, res, { component: 'Links/DataLoading' }))
+app.get('/links/prop-update', (req, res) => inertia.render(req, res, { component: 'Links/PropUpdate' }))
 
 app.get('/visits/partial-reloads', (req, res) =>
   inertia.render(req, res, {
@@ -311,7 +312,7 @@ app.get('/deferred-props/page-2', (req, res) => {
 })
 
 app.get('/svelte/props-and-page-store', (req, res) =>
-  inertia.render(req, res, { component: 'Svelte/PropsAndPageStore', props: { foo: req.query.foo || 'default' }}),
+  inertia.render(req, res, { component: 'Svelte/PropsAndPageStore', props: { foo: req.query.foo || 'default' } }),
 )
 
 app.all('/sleep', (req, res) => setTimeout(() => res.send(''), 2000))

tests/links.spec.ts

@@ -754,3 +754,12 @@ test.describe('data-loading attribute', () => {
     await expect(link2).not.toHaveAttribute('data-loading')
   })
 })
+
+test('will update href if prop is updated', async ({ page }) => {
+  await page.goto('/links/prop-update')
+  const link = await page.getByRole('link', { name: 'The Link' })
+  const button = await page.getByRole('button', { name: 'Change URL' })
+  await expect(link).toHaveAttribute('href', /\/sleep$/)
+  await button.click()
+  await expect(link).toHaveAttribute('href', /\/something-else$/)
+})