Livewire redirect from one component to another

Hi Amit, I believe the livewire docs would be a great start !

https://laravel-livewire.com/docs/2.x/redirecting

The redirect method implies redirecting the entire page @gitwithravish

@amitshrestha221 - I am facing a similar problem as I want to use a button inside the component to have 2 separate forms depending on the user choice. I could accomplish that with conditions in render(). Still, I also want to separate methods for each component - ergo, have one component being replaced by another when a button is clicked.

For now, the only solution that I could think of is to have JS, (e.g. Alpine.js as it works quite well with Livewire) to listen to Livewire events and rerender (swap) @livewire dynamically without reloading the page - it could be as simple as toggle technique passing some attributes from the event.

But I'm opened to suggestions, as it's not the prettiest solution and I want to limit alpine to the minimum.

@mdenisiuk did you find a solution to your problem?

If I understand your question, you want to switch between components without a page refresh.

I use livewire:is and Artisan::call('view:clear') to accomplish this. Here's an example from a ReportBuilder component that I am still developing for a client.

<?php

namespace App\Http\Livewire\Admin\Reporting;

use Auth;
use Artisan;
use Livewire\Component;

class ReportBuilder extends Component
{
    public $reportChoices;
    public $selectedReport;

    const REPORTS = [
        [
            'name' => 'Top Tasks By Usage',
            'component' => 'tasks.top-used-tasks-report',
        ],
        [
            'name' => 'New Users',
            'component' => 'users.new-users-report',
        ],
        // ...
    ];

    protected function updatedReportChoices()
    {
        if($this->reportChoices === 'unselected') {
            $this->selectedReport = null;
        } else {
		    $this->selectedReport = 'admin.reporting.' . self::REPORTS[$this->reportChoices]['component'];
        }

        $this->render();
        Artisan::call('view:clear');
            
    }

    public function render()
    {
        return view('livewire.admin.reporting.report-builder');
    }

}

and then use a select to switch between the reports

<select wire:model="reportChoices">
                        <option value="unselected">Select Report</option>
                        @foreach( self::REPORTS as $key => $report )
                            <option value="{{ $key }}">{{ $report['name'] }}</option>
                        @endforeach
                    </select>

and then load the selected component with...

<div class="h-full" wire:loading.remove>
                        @if(!is_null($selectedReport))
                        <livewire:is :component="$selectedReport">
                        @else
                        <div class="h-full min-h-96 flex justify-center items-center text-3xl text-gray-300 dark:text-gray-700">
                            Select a report to continue
                        </div>
                        @endif
                    </div>