Livewire pagination issue with multiple components on the same page

Question

I'm facing an issue with Livewire pagination when using two components with pagination on the same page. I followed the Livewire documentation's suggestion for using multiple paginators. However, whenever I try to navigate to the page on one of the components, I'm encountering two problems:

• The first time I navigate, it works as expected, but the subsequent attempts won't redirect;
• The links for pagination navigation disappear after the first redirect;
• If I change the url manually, the component reflects the change and shows the correct page. Althought clicking on the pages in the component itself only works the first time.

The other component operates as intended, it's created in the same way as the one that shows the described problems.

I tried following the documentation and debugging, but it didn't get me anywhere. So here's a simplified version of my code, which is loosely based on the docs.

ActivityLogs.php

class ActivityLogs extends Component
{
    use WithPagination;

    public Model $model;

    private ActivityLogRepository $activityLogRepository;

    public function boot(ActivityLogRepository $activityLogRepository): void
    {
        $this->activityLogRepository = $activityLogRepository;
    }

    public function mount(Model $model): void
    {
        $this->model = $model;
    }

   public function render(): View
   {
       return view('livewire.activity-logs.activity-logs', [
           'activities' => $this->activityLogRepository
               ->getLogsForModel($this->model)
               ->paginate(5, pageName: 'activityPage'),
       ]);
    }
}

activity-logs.blade.php

<x-cards.simple class="col-span-6 lg:col-span-3 xl:col-span-2 overscroll-contain"
                max-height="lg"
                title="{{ __('Activity Logs') }}"
                icon="project"
>
    <div class="my-2 pr-2 h-full lg:max-h-[300px]">
        @if($activities->isNotEmpty())
            @foreach($activities as $activity)
                @dump($activity)
            @endforeach

            <div class="mt-8">
                {{ $activities->onEachSide(1)->links() }}
            </div>
        @else
            <span>
                {{ __('This model has no logged activities.') }}
            </span>
        @endif
    </div>
</x-cards.simple>

I would appreciate any insights into why I'm facing the previously described problems. Thank you!

Answer 1

It seems like you're missing the :key attribute on your nested component. Because Livewire needs to know which component should be rerendered, the :key attribute is used to keep track of components.

Updated activity-logs.blade.php

<x-cards.simple class="col-span-6 lg:col-span-3 xl:col-span-2 overscroll-contain"
                max-height="lg"
                title="{{ __('Activity Logs') }}"
                icon="project"
>
    <div class="my-2 pr-2 h-full lg:max-h-[300px]">
        @if($activities->isNotEmpty())
            @foreach($activities as $activity)
                <livewire:common.activity-logs.activity-log :activity="$activity" :key="$activity->id" />
            @endforeach

            <div class="mt-8">
                {{ $activities->onEachSide(1)->links() }}
            </div>
        @else
            <span>
                {{ __('This model has no logged activities.') }}
            </span>
        @endif
    </div>
</x-cards.simple>

Reference: https://laravel-livewire.com/docs/2.x/nesting-components#keyed-components