SammyAttemptsCode's avatar

Results page not showing after hitting browser's "Back" button

Hi,

First time I have to reach for the forums with an issue. AI assistance seems not to be able to find the issue either.

TLDR: When navigating back from a Product page back to the Search Results page, the DOM doesn't update back to the Results page.

Here's the context:

(Inertia, vue)

I have a very simple search results page scaffold to test. In there, I have a UL with LI that contain Link components. Those link components direct the user to a specific page that belongs to that result.

From here I can reach the Product page just fine. When I try to navigate back with the browser's back button, the title in Head updates correctly to the expected value for the Search Results page

(<Head :title="Search results for ${props.query}"/>)

but the rest of the page remains the same (Looks like we're still on the product page!)

I do not understand why that is the case. Is this a common issue? I've had the same issue when trying to navigate from an index page (i.e. "All products from 2025") to the product page and back again. I'm at a loss. =(

0 likes
6 replies
SammyAttemptsCode's avatar

Hi,

I am not sure what part I should be looking at here.

I'm doing some more digging and it appears to be related to the history state. When I navigate to the Product page and hit history.state in the console, I get a NULL response.

I proceed to press BACK on the browser. The DOM does not update, the Title in Head does change and I proceed to try history.state in the console again.

Now I do get a state - one that reflects the current Product page.

I repeat the same process. Hit back, check history. This time it's NULL once more.

Repeat again. State is populated with the product.

This repeats ad infinitum.

If I double press back on the browser, I return to my home page (from which I initiated my search)

I now have the option to press Forward on the browser as well. Doing so takes me from my Home page to the Product page, skipping the Search Results page.

It looks like there is no history / incompatible history for the search results page.

That is as far as I have gotten.

SammyAttemptsCode's avatar

I've spent another 4 hours on it and I still haven't found the cause. This is starting to worry me.

LaryAI's avatar
LaryAI
AI
4 months ago
Level 58

This is a somewhat common issue in Inertia.js + Vue apps and is usually related to caching, key props, or how Vue manages its internal state between page transitions.

Possible root causes and solutions:

1. Component Keying Issues

If two different "pages" (i.e., Vue components returned by Inertia) render similar markup or share base components, Vue might be reusing the previous component instead of fully replacing it. This can lead to the DOM not updating as expected.

Quick fix: Use a unique :key prop on your page's root element or the main wrapper, typically using route or component name.

Example:

<template>
    <div :key="$page.component">
        <!-- Your page content -->
    </div>
</template>

Or, if using named pages:

<template>
    <div :key="$page.url">
        <!-- Your page content -->
    </div>
</template>

2. Inertia Progress Recovery

Sometimes, Inertia's progress events or Vue's transition lifecycle can be interrupted. Ensure you don't have manual navigation or cached state interfering with Inertia's back/forward support.

Check your main app mount in app.js:

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'

createInertiaApp({
  // ...
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

Make sure you are not saving scroll positions or page states improperly.

3. Use the Inertia Link component

Instead of Vue Router's <router-link>, always use Inertia's <Link>:

<template>
  <ul>
    <li v-for="product in products" :key="product.id">
      <Link :href="route('products.show', product.id)">
        {{ product.name }}
      </Link>
    </li>
  </ul>
</template>

4. Disable Persistent Layouts Temporarily

If you use "persistent layouts" (the pattern with layout: (h, page) => h(Layout, [page])), try disabling it for debugging, as it can cause child components to stay mounted and state to persist.

5. Debug with Inertia DevTools

Check the Inertia.js DevTools extension to see if the page visits are actually firing as expected.

Summary (Step-by-step):

  1. Make sure all your main pages have a unique root key (for example, :key="$page.component").
  2. Confirm you're using <Link> from Inertia for navigation.
  3. Check your Inertia/Vue app.js for proper mounting.
  4. Disable persistent layouts for debugging.
  5. Watch the behavior with the DevTools.

Example Fix

Let's say Results.vue is your search results page and Show.vue is the product page. In Results.vue:

<template>
    <div :key="$page.url">
        <Head :title="`Search results for ${query}`" />
        <ul>
          <li v-for="product in products" :key="product.id">
              <Link :href="route('products.show', product.id)">
                  {{ product.name }}
              </Link>
          </li>
        </ul>
    </div>
</template>

This :key="$page.url" ensures Vue re-initializes when the route changes.

If after these steps the issue persists, please post your app initialization code and the route definitions for further debugging.

Please or to participate in this conversation.