Livewire Full Page component issue

Hi everyone, I'm having trouble with wire:navigate. When I click on a div with wire:click inside a full-page component after using a navigation link with wire:navigate, it leads to multiple server requests. It seems wire:navigate creates multiple component instances. Is there a way to remove listeners with each wire:navigate click?

// Page
class Page extends Component
{
	public function handleClick()
    {
    
    }

    public function render()
    {
        return view('livewire.page')
            ->layout('components.layouts.default');
    }
}

// components.layouts.default
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>{{ $title ?? 'Page Title' }}</title>
    </head>
    <body>
    <div>
        <a href="/news" wire:navigate>News</a>
    </div>
        {{ $slot }}
    </body>
</html>

// livewire.page
<div>
    <h1>News</h1>
    <div wire:click="handleClick">click</div>
</div>

After clicking the News link using wire:navigate, then clicking the div with the wire:click="handleClick" attribute, server xhr requests increase

vincent15000

2 years ago

Level 63

I'm also interested in knowing what happens.

Please or to participate in this conversation.