route.current('..') not updating with inertia.js

[taghreedalshammari]

Ziggy version

^1.0

Laravel version

^8.38

Description

It was working fine but lately, I noticed that route.current() not updating on page visits, every time I have to refresh in order to get the right active route

Ziggy call and context

<li class="mainSidebar__rightListItem" 
:class="{ 'mainSidebar__rightListItem--active': route().current('dashboard*') }"
></li>

Ziggy configuration

embedded in blade view of laravel

Route definition

Route::get('/dashboard', [
    DashboardController::class,
    'index',
])->middleware('auth:web')->name('dashboard');

[taghreedalshammari]

what could prevent ziggy from updating route().current() value
I used the same implementation in somewhere else and it's working fine
but here it does not, no console errors though

[bakerkretzmar]

Can you try moving route().current('dashboard*') into a computed property and then accessing that property in your template? My guess would be this has something to do with Inertia only re-rendering some parts of the template during navigation.

[taghreedalshammari]

I found out why.
route().current('dashboard*') was accessed in a child component of the layout, I had to pass route().current() as property to the child component to solve it. @bakerkretzmar

[madsh93]

I found out why. route().current('dashboard*') was accessed in a child component of the layout, I had to pass route().current() as property to the child component to solve it. @bakerkretzmar

I'm using it in a layout, therefore not able to pass it as a prop. Do you know if it is possible to re-fetch current route again somehow?

[bakerkretzmar]

@madsh93 try listening for Inertia's navigate event maybe? https://inertiajs.com/events#navigate

[madsh93]

@madsh93 try listening for Inertia's navigate event maybe? https://inertiajs.com/events#navigate

Haha funny! I was just doing that and was about to post the solution. Thanks!

[davidoskay]

I found out why. route().current('dashboard*') was accessed in a child component of the layout, I had to pass route().current() as property to the child component to solve it. @bakerkretzmar

Works only if there is no need to check id inside route. I have sidebar with multiple routes, so passing parameter route()->current() only looks for changes in route name, while I need watching route name and id param.

I ended doing, any better option?

Sidebar.vue:

...
const props = defineProps({
    routeChanged: Object
});

const myNav = ref([]);
const setRoutes = () => {
    myNav.value = [{
        name: 'Main Page',
        href: '#',
        current: route().current('Main Page')
    }, ];

    usePage().props.value.auth.user.myItems.forEach(function(item) {
        let obj = {
            name: item.name,
            href: route('myRoute', item.id),
            current: route().current('myRoute', item.id)
        };
        myNav.value.push(obj);
    });
}
setRoutes();
watch(() => props.routeChanged, setRoutes);

Layout.vue:

<template>
<Sidebar  :routeChanged="routeChanged">
</template>

<script setup>
import Sidebar from "./Sidebar";

import { Inertia } from "@inertiajs/inertia";
import { ref } from "vue";

const routeChanged = ref(0);

Inertia.on('navigate', (event) => {
        routeChanged.value = event.detail.page.url;
    })
</script>

Any better options?

[obenchkroune]

i think this may help

<script>
import { ref } from 'vue';
import { Inertia } from '@inertiajs/inertia';


let navigation = ref([]);
const setNavigation = () => {
    navigation.value = [
        {
            name: 'Dashboard',
            href: route('dashboard'),
            current: route().current('dashboard')
        },
        // ....
    ]
}

Inertia.on('navigate', () => {
    setNavigation();
});
</script>
<template>
    .....
</template>

[stuartcusackie]

I have the same problem and I tried passing route().current() to the nested component but it had the same problem.

I am thinking that this is related to my default persistent layout.

I have confirmed this behaviour by removing persistent layouts and I will open a new issue.

I am using a workaround in my HandleInertiaRequests middleware for the moment.

[JoaoHamerski]

I used Pinia as a workaround

Here's my store file:

import { defineStore } from 'pinia'

export const useAppStore = defineStore('app', {
    state: () => ({
        route: route(),
    }),
    actions: {
        setCurrentRoute () {
            this.route = route()
        }
    }
})

Listen to "navigate" event in your main file (my case the main layout), every time the event triggers, call the setCurrentRoute action:

import { useAppStore } from '@/pinia/app';

const app = useAppStore()

router.on('navigate', () => {
  app.setCurrentRoute()
})

Use like that in your components:

import { useAppStore } from '@/pinia/app'

const app = useAppStore()

const current = computed(() => {
  return app.route.current()
})

[aqordeon]

Yes, Pinia help me work around, and works well. Just save the route name to Pinia whenever the page is changing router.on('navigate', (event) => {... pinia method here ...})