Checking for current route always returns false

Description

I currently have three routes but when checking if I am on the current route always returns false.

Expected behavior

When I am on the route the route().current('route_name') should return true.

Environment

• Laravel version: 8.12
• Ziggy version: 0.9.4
• Jetstream version: 1.6

Related routes:

Route::get('/', function () {
    return view('welcome');
});

Route::middleware(['auth:sanctum', 'verified'])->get('/courses', function () {
    return Inertia\Inertia::render('Courses');
})->name('courses');

Route::middleware(['auth:sanctum', 'verified'])->get('/course/{id}', function (int $id) {
    return Inertia\Inertia::render('Course');
})->name('course');

Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
    return Inertia\Inertia::render('Dashboard');
})->name('dashboard');

Ziggy.routes: undefined

When I check for Ziggy.namedRoutes I get this:

{
  "ignition.healthCheck": {
    "uri": "_ignition/health-check",
    "methods": [
      "GET",
      "HEAD"
    ],
    "domain": null
  },
  "ignition.executeSolution": {
    "uri": "_ignition/execute-solution",
    "methods": [
      "POST"
    ],
    "domain": null
  },
  "ignition.shareReport": {
    "uri": "_ignition/share-report",
    "methods": [
      "POST"
    ],
    "domain": null
  },
  "ignition.scripts": {
    "uri": "_ignition/scripts/{script}",
    "methods": [
      "GET",
      "HEAD"
    ],
    "domain": null
  },
  "ignition.styles": {
    "uri": "_ignition/styles/{style}",
    "methods": [
      "GET",
      "HEAD"
    ],
    "domain": null
  },
  "login": {
    "uri": "login",
    "methods": [
      "GET",
      "HEAD"
    ],
    "domain": null
  },
  "logout": {
    "uri": "logout",
    "methods": [
      "POST"
    ],
    "domain": null
  },
  "password.request": {
    "uri": "forgot-password",
    "methods": [
      "GET",
      "HEAD"
    ],
    "domain": null
  },
  "password.reset": {
    "uri": "reset-password/{token}",
    "methods": [
      "GET",
      "HEAD"
    ],
    "domain": null
  },
  "password.email": {
    "uri": "forgot-password",
    "methods": [
      "POST"
    ],
    "domain": null
  },
  "password.update": {
    "uri": "reset-password",
    "methods": [
      "POST"
    ],
    "domain": null
  },
  "register": {
    "uri": "register",
    "methods": [
      "GET",
      "HEAD"
    ],
    "domain": null
  },
  "user-profile-information.update": {
    "uri": "user/profile-information",
    "methods": [
      "PUT"
    ],
    "domain": null
  },
  "user-password.update": {
    "uri": "user/password",
    "methods": [
      "PUT"
    ],
    "domain": null
  },
  "password.confirm": {
    "uri": "user/confirm-password",
    "methods": [
      "GET",
      "HEAD"
    ],
    "domain": null
  },
  "password.confirmation": {
    "uri": "user/confirmed-password-status",
    "methods": [
      "GET",
      "HEAD"
    ],
    "domain": null
  },
  "two-factor.login": {
    "uri": "two-factor-challenge",
    "methods": [
      "GET",
      "HEAD"
    ],
    "domain": null
  },
  "profile.show": {
    "uri": "user/profile",
    "methods": [
      "GET",
      "HEAD"
    ],
    "domain": null
  },
  "other-browser-sessions.destroy": {
    "uri": "user/other-browser-sessions",
    "methods": [
      "DELETE"
    ],
    "domain": null
  },
  "current-user.destroy": {
    "uri": "user",
    "methods": [
      "DELETE"
    ],
    "domain": null
  },
  "current-user-photo.destroy": {
    "uri": "user/profile-photo",
    "methods": [
      "DELETE"
    ],
    "domain": null
  },
  "courses": {
    "uri": "courses",
    "methods": [
      "GET",
      "HEAD"
    ],
    "domain": null
  },
  "course": {
    "uri": "course/{id}",
    "methods": [
      "GET",
      "HEAD"
    ],
    "domain": null
  },
  "dashboard": {
    "uri": "dashboard",
    "methods": [
      "GET",
      "HEAD"
    ],
    "domain": null
  }
}

Ziggy call and context:

I am using the default configuration of Laravel Jetstream, the problem occurs in AppLayout.vue

     <jet-nav-link :href="route('dashboard')" :active="route().current('dashboard')">
                                Dashboard
                            </jet-nav-link>
                            <jet-nav-link :href="route('courses')" :active="route().current('courses')">
                                Cursussen
                            </jet-nav-link>

[fsavalam]

Hi, @basvandinther I made a simple workaround for this (for my convenience 😅 - using Vue.js and Inertia.js), and I don’t know if it will help you.

1. I exposed my current route name in the Inertia middleware file:

public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            // ...
            'currentRouteName' => Route::currentRouteName()
        ]);
    }

1. I created a global mixin, that returns true/false depending on whether the currentRouteName value exists in an array (or single) links:

import { createApp, h } from 'vue'

const app = createApp({
    // ..
})

app.mixin({
    methods: { 
        // ...
        activeLink(links) {
            return links.includes(this.$page.props.currentRouteName)
        }
    }
})

1. Finally, this is how I use it for my links:

<inertia-link :href="route('adventure-time')"  :class=" `${activeLink(['user.dashboard', 'user.settings']) ? 'activeClass' : 'mehh' }` "></inertia-link>

This works well for me (I know it could be neater 😅)

[basvandinther]

Okay, gonna try this tomorrow. Thank you very much for your quick help.