preserveUrl does not work as expected in React environment but works in Vue 3

[catatsumuri]

Version:

• @inertiajs/react: 2.0.0
• Laravel Framework: 11.36.1
• React: 18.2.0
• Vite: 6.0

---

Describe the problem:

When using the preserveUrl: true option with the React adapter of Inertia.js, the URL is updated in the browser despite the option being set to preserve the current URL.

However, the same functionality works as expected in the Vue 3 adapter. This indicates a potential issue with the React adapter's implementation of the preserveUrl feature.

---

Steps to reproduce:

1. Backend:

   Laravel routes:

   Route::get('/url', [PreserveUrlDemoController::class, 'index'])->name('preserve-url-demo');
   Route::get('/url/1', [PreserveUrlDemoController::class, 'one'])->name('preserve-url-demo-1');

   Laravel controller:

   use Inertia\Inertia;
   
   class PreserveUrlDemoController extends Controller {
       public function index() {
           return Inertia::render('PreserveUrlDemo', [
               'message' => 'This is the Index Page',
           ]);
       }
   
       public function one() {
           return Inertia::render('PreserveUrlDemo', [
               'message' => 'This is Page One',
           ]);
       }
   }

2. React implementation:

   import React from 'react';
   import { router } from '@inertiajs/react';
   
   export default function PreserveUrlDemo({ message }) {
       const navigateToOne = () => {
           router.visit(route('preserve-url-demo-1'), {
               method: 'get',
               preserveUrl: true,
           });
       };
   
       const navigateToIndex = () => {
           router.visit(route('preserve-url-demo'), {
               method: 'get',
               preserveUrl: false,
           });
       };
   
       return (
           <div>
               <h1>{message}</h1>
               <button onClick={navigateToOne}>Go to Page One</button>
               <button onClick={navigateToIndex}>Go to Index Page</button>
           </div>
       );
   }

3. Vue implementation (works correctly):

   <template>
     <div>
       <h1>{{ message }}</h1>
       <button @click="navigateToOne">Go to Page One</button>
       <button @click="navigateToIndex">Go to Index Page</button>
     </div>
   </template>
   
   <script>
   import { router } from '@inertiajs/vue3';
   
   export default {
       props: {
           message: String,
       },
       methods: {
           navigateToOne() {
               router.visit(this.route('preserve-url-demo-1'), {
                   method: 'get',
                   preserveUrl: true,
               });
           },
           navigateToIndex() {
               router.visit(this.route('preserve-url-demo'), {
                   method: 'get',
                   preserveUrl: false,
               });
           },
       },
   };
   </script>

---

Expected behavior:

When preserveUrl: true is set, the browser's URL should remain unchanged, and only the page content should update.

---

Actual behavior:

In the React environment:

• The URL is updated in the browser even though preserveUrl is set to true.

In the Vue 3 environment:

• The URL remains unchanged as expected, and the page content updates correctly.

---

Additional context:

No error messages appear in the browser console, and network requests are made as expected. However, the React adapter does not preserve the URL correctly.