Fix Livewire Pagination Redirecting to /livewire/update

This is a really simple fix. Let's figure out what the problem is here first.

Imagine a component that lists out a bunch of transactions:

class TransactionsTable extends Component
{
    public function render()
    {
        return view('livewire.transactions-table', [
            'transactions' => Transaction::latest()->paginate(10),
        ]);
    }
}

Here's the template:

<div>
    <div>
        <!-- Output stuff here, doesn't matter what/how -->
    </div>

    <div>
        <!-- The pagination links -->
        {{ $transactions->links() }}
    </div>
</div>

The pagination here will work, but any time this component gets updated/refreshed, we'll see a redirect to /livewire/update for each pagination link.

The solution¶

You'll kick yourself if you've been stuck on this for a while. The issue is simply that we haven't included the WithPagination trait.

use Livewire\WithPagination;

class TransactionsTable extends Component
{
    use WithPagination;

    public function render()
    {
        return view('livewire.transactions-table', [
            'transactions' => Transaction::latest()->paginate(10),
        ]);
    }
}

Pagination was still working because it used the paginator from Eloquent, as usual, to display the links. Here's what didn't work, though:

1. When you actually click a pagination link, you would have seen a full refresh (and not a nice Livewire update)
2. Each pagination link would have been updated to /livewire/update because that's the endpoint that Livewire uses to refresh a component

It's tricky because everything appears to be working on the surface due to Livewire using Blade.

Hope this helps!