I’ve gone through the official documentation thoroughly, but I’m still unable to resolve this issue.

I’m currently using Laravel version 11 and Livewire version 3.

The problem is as follows:

When I dispatch an event from the right view page to the left view page and add a query string, navigating forward or backward in the browser triggers an unexpected /livewire/update event instead of normal page navigation. How can I resolve this?

{{--index.blade.php--}}
<div>
    <livewire:left wire:key="left"/>
    <livewire:right wire:key="right"/>
</div>

{{--right.blade.php--}}
<div>
    <a wire:click="$dispatch('emitCoinInfo', { market : 'KRW', coin : 'ETH'});"></a>
    <a wire:click="$dispatch('emitCoinInfo', { market : 'KRW', coin : 'BTC'});"></a>
</div>

//Left.php
namespace AppLivewireExchange;

use LivewireAttributesOn;
use LivewireAttributesRenderless;
use LivewireAttributesUrl;
use LivewireComponent;

class Left extends Component
{
    #[Url]
    public $code = 'KRW-EGX';
    public $coin = '';
    public $market = '';

    protected $queryString = ['code' => ['keep' => true]];
    
    #[On('emitCoinInfo')]
    #[Renderless]
    public function emitCoinInfo($market, $coin)
    {
        $this->code = $market . '-' . $coin;
        $this->market = $market;
        $this->coin = $coin;
    }

    public function render()
    {
        return view('left');
    }
}

I’m forcibly reloading the page when navigating back because I haven’t found a solution yet. However, this doesn’t seem like a fundamental solution.

<script>
    window.addEventListener("popstate", function (event) {
        let pathName = window.location.pathname;
        if (pathName === '/exchange') {
            window.location.reload();
        }
    });
</script>