Detecting the current uri when using Livewire as a SPA

Let's say you have a simple set of navigation links on your website and you want to highlight that link in a different colour should the user click that page.

<nav>
    <a href="/">Home</a>
    <a href="/posts">Posts</a>
</nav>

Navigating to either of these links requires a full page refresh. You will need to add wire:navigate as a prop on the anchor tag for your website to behave like a Single Page Application.

<nav class="flex justify-end gap-4 py-4 mb-16">
    <a href="/" wire:navigate>Home</a>
    <a href="/posts" wire:navigate>Posts</a>
</nav>

Now when you navigate to one of these items, you will notice the page no longer refreshes and makes a direct request to the server to change the page content instead.

We could add a blade directive @if to render what ever the current uri is in the request. But Livewire provides a wire:current directive that detects the current uri. Just add a class to see the text change colour for example.

<nav>
    <a href="/" wire:navigate wire:current="text-blue-400">Home</a>
    <a href="/posts" wire:navigate wire:current="text-blue-400">Posts</a>
</nav>

This is fine at first glance. But when you navigate away from Home to Posts, you will notice the "Home" page is still highlighted. We don't want this behaviour, instead we only want to highlight Home if it is an exact match.

Just add the exact modifier.

<nav>
    <a href="/" wire:navigate wire:current.exact="text-blue-400">Home</a>
    <a href="/posts" wire:navigate wire:current="text-blue-400">Posts</a>
</nav>

Now when you navigate between each page, notice the highlighted text changes as expected.