feat: Add preserveUrl option.

Author: xiCO2k

packages/core/src/router.ts

@@ -162,9 +162,9 @@ export class Router {
     })
   }
 
-  protected locationVisit(url: URL, preserveScroll: LocationVisit['preserveScroll']): boolean | void {
+  protected locationVisit(url: URL, preserveScroll: LocationVisit['preserveScroll'], preserveUrl: LocationVisit['preserveUrl']): boolean | void {
     try {
-      const locationVisit: LocationVisit = { preserveScroll }
+      const locationVisit: LocationVisit = { preserveScroll, preserveUrl }
       window.sessionStorage.setItem('inertiaLocationVisit', JSON.stringify(locationVisit))
       window.location.href = url.href
       if (urlWithoutHash(window.location).href === urlWithoutHash(url).href) {
@@ -189,7 +189,11 @@ export class Router {
     page.url += window.location.hash
     page.rememberedState = window.history.state?.rememberedState ?? {}
     page.scrollRegions = window.history.state?.scrollRegions ?? []
-    this.setPage(page, { preserveScroll: locationVisit.preserveScroll, preserveState: true }).then(() => {
+    this.setPage(page, {
+      preserveScroll: locationVisit.preserveScroll,
+      preserveUrl: locationVisit.preserveUrl,
+      preserveState: true,
+    }).then(() => {
       if (locationVisit.preserveScroll) {
         this.restoreScrollPositions()
       }
@@ -259,6 +263,7 @@ export class Router {
       replace = false,
       preserveScroll = false,
       preserveState = false,
+      preserveUrl = false,
       only = [],
       headers = {},
       errorBag = '',
@@ -293,6 +298,7 @@ export class Router {
       replace,
       preserveScroll,
       preserveState,
+      preserveUrl,
       only,
       headers,
       errorBag,
@@ -378,6 +384,7 @@ export class Router {
         }
         preserveScroll = this.resolvePreserveOption(preserveScroll, pageResponse) as boolean
         preserveState = this.resolvePreserveOption(preserveState, pageResponse)
+        preserveUrl = this.resolvePreserveOption(preserveUrl, pageResponse) as boolean
         if (preserveState && window.history.state?.rememberedState && pageResponse.component === this.page.component) {
           pageResponse.rememberedState = window.history.state.rememberedState
         }
@@ -408,7 +415,7 @@ export class Router {
           if (requestUrl.hash && !locationUrl.hash && urlWithoutHash(requestUrl).href === locationUrl.href) {
             locationUrl.hash = requestUrl.hash
           }
-          this.locationVisit(locationUrl, preserveScroll === true)
+          this.locationVisit(locationUrl, preserveScroll === true, preserveUrl === true)
         } else if (error.response) {
           if (fireInvalidEvent(error.response)) {
             modal.show(error.response.data)
@@ -442,19 +449,27 @@ export class Router {
       replace = false,
       preserveScroll = false,
       preserveState = false,
+      preserveUrl = false,
     }: {
       visitId?: VisitId
       replace?: boolean
       preserveScroll?: PreserveStateOption
       preserveState?: PreserveStateOption
+      preserveUrl?: PreserveStateOption
     } = {},
   ): Promise<void> {
     return Promise.resolve(this.resolveComponent(page.component)).then((component) => {
       if (visitId === this.visitId) {
         page.scrollRegions = page.scrollRegions || []
         page.rememberedState = page.rememberedState || {}
         replace = replace || hrefToUrl(page.url).href === window.location.href
+
+        if (preserveUrl) {
+          page.url = window.location.href
+        }
+
         replace ? this.replaceState(page) : this.pushState(page)
+
         this.swapComponent({ component, page, preserveState }).then(() => {
           if (!preserveScroll) {
             this.resetScrollPositions()

packages/core/src/types.ts

@@ -61,6 +61,7 @@ export type Progress = AxiosProgressEvent
 
 export type LocationVisit = {
   preserveScroll: boolean
+  preserveUrl: boolean
 }
 
 export type Visit = {
@@ -69,6 +70,7 @@ export type Visit = {
   replace: boolean
   preserveScroll: PreserveStateOption
   preserveState: PreserveStateOption
+  preserveUrl: PreserveStateOption
   only: Array<string>
   headers: Record<string, string>
   errorBag: string | null

packages/react/src/Link.ts

@@ -20,6 +20,7 @@ interface BaseInertiaLinkProps {
   onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void
   preserveScroll?: PreserveStateOption
   preserveState?: PreserveStateOption
+  preserveUrl?: PreserveStateOption
   replace?: boolean
   only?: string[]
   onCancelToken?: (cancelToken: import('axios').CancelTokenSource) => void
@@ -47,6 +48,7 @@ const Link = forwardRef<unknown, InertiaLinkProps>(
       method = 'get',
       preserveScroll = false,
       preserveState = null,
+      preserveUrl = false,
       replace = false,
       only = [],
       headers = {},
@@ -76,6 +78,7 @@ const Link = forwardRef<unknown, InertiaLinkProps>(
             method,
             preserveScroll,
             preserveState: preserveState ?? method !== 'get',
+            preserveUrl,
             replace,
             only,
             headers,
@@ -96,6 +99,7 @@ const Link = forwardRef<unknown, InertiaLinkProps>(
         method,
         preserveScroll,
         preserveState,
+        preserveUrl,
         replace,
         only,
         headers,

packages/svelte/src/Link.svelte

@@ -9,6 +9,7 @@
   export let replace = false
   export let preserveScroll = false
   export let preserveState = null
+  export let preserveUrl = false
   export let only = []
   export let headers = {}
   export let queryStringArrayFormat = 'brackets'
@@ -32,6 +33,7 @@
     replace,
     preserveScroll,
     preserveState: preserveState ?? method !== 'get',
+    preserveUrl,
     only,
     headers,
     queryStringArrayFormat,

packages/vue2/src/link.ts

@@ -18,6 +18,7 @@ export interface InertiaLinkProps {
   onClick?: (event: MouseEvent) => void
   preserveScroll?: PreserveStateOption
   preserveState?: PreserveStateOption
+  preserveUrl?: PreserveStateOption
   replace?: boolean
   only?: string[]
   onCancelToken?: (cancelToken: import('axios').CancelTokenSource) => void
@@ -62,6 +63,10 @@ const Link: InertiaLink = {
       type: Boolean,
       default: null,
     },
+    preserveUrl: {
+      type: Boolean,
+      default: false,
+    },
     only: {
       type: Array,
       default: () => [],
@@ -126,6 +131,7 @@ const Link: InertiaLink = {
                 replace: props.replace,
                 preserveScroll: props.preserveScroll,
                 preserveState: props.preserveState ?? method !== 'get',
+                preserveUrl: props.preserveUrl,
                 only: props.only,
                 headers: props.headers,
                 // @ts-expect-error

packages/vue2/tests/app/Pages/Visits/PreserveUrl.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <span @click="preserve" class="preserve">Preserve Url</span>
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    preserve() {
+      this.$inertia.get('/visits/preserve-url?page=2', {}, {
+        preserveUrl: true,
+      })
+    },
+  }
+}
+</script>

packages/vue2/tests/app/server.js

@@ -97,6 +97,9 @@ app.get('/visits/headers/version', (req, res) =>
   inertia.render(req, res, { component: 'Visits/Headers', version: 'example-version-header' }),
 )
 
+app.all('/visits/preserve-url', (req, res) =>
+  inertia.render(req, res, { component: 'Visits/PreserveUrl' }))
+
 app.post('/remember/form-helper/default', (req, res) =>
   inertia.render(req, res, {
     component: 'Remember/FormHelper/Default',

packages/vue2/tests/cypress/integration/manual-visits.test.js

@@ -1209,6 +1209,15 @@ describe('Manual Visits', () => {
     })
   })
 
+  describe('Preserve url', () => {
+    it('does preserves the url if the perserveUrl flag is passed', () => {
+      cy.visit('/visits/preserve-url')
+
+      cy.get('.preserve').click()
+      cy.url().should('eq', Cypress.config().baseUrl + '/visits/preserve-url')
+    });
+  })
+
   describe('URL fragment navigation (& automatic scrolling)', () => {
     /** @see https://github.com/inertiajs/inertia/pull/257 */
 

packages/vue3/src/link.ts

@@ -10,6 +10,7 @@ export interface InertiaLinkProps {
   onClick?: (event: MouseEvent) => void
   preserveScroll?: boolean | ((props: PageProps) => boolean)
   preserveState?: boolean | ((props: PageProps) => boolean) | null
+  preserveUrl?: boolean | ((props: PageProps) => boolean)
   replace?: boolean
   only?: string[]
   onCancelToken?: (cancelToken: import('axios').CancelTokenSource) => void
@@ -55,6 +56,10 @@ const Link: InertiaLink = defineComponent({
       type: Boolean,
       default: null,
     },
+    preserveUrl: {
+      type: Boolean,
+      default: false,
+    },
     only: {
       type: Array<string>,
       default: () => [],
@@ -95,6 +100,7 @@ const Link: InertiaLink = defineComponent({
                 replace: props.replace,
                 preserveScroll: props.preserveScroll,
                 preserveState: props.preserveState ?? method !== 'get',
+                preserveUrl: props.preserveUrl,
                 only: props.only,
                 headers: props.headers,
                 // @ts-expect-error