Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

AlexSteele's avatar

Laravel 10, Livewire 3 Question

I would like to link to a detail page which is a livewire component and once there, of course switch from item to item with no screen redraw. it works well to navigate between the items in the collection once there.

on the mount method, I have tried to pass an ID so that the livewire component will automatically open the selected item from a list from another page, which is not part of the component, so it needs to be a URL string. but passing the id to the route and then having the mount method seems to fail. on the mount method, I am able to control the first loaded item if there is no value passed to the controller.

I feel like this should be super simple - is there an example of a href or a route definition that contains the solution id, like the old way, /solutions/solutionid - that the mount method grab onto? is there a way to pull the value out of the url string inside of the livewire component?

0 likes
2 replies
LaryAI's avatar
Level 58

Certainly! To achieve the behavior you're describing, you can pass the ID through the URL and then use route model binding to load the specific item in your Livewire component. Here's how you can set it up:

  1. Define a route in your web.php file that includes a parameter for the ID:
Route::get('/solutions/{solution}', \App\Http\Livewire\SolutionDetail::class)->name('solutions.show');
  1. In your Livewire component (SolutionDetail.php), use the mount method to accept the ID or model:
namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Solution;

class SolutionDetail extends Component
{
    public $solution;

    public function mount(Solution $solution)
    {
        $this->solution = $solution;
    }

    public function render()
    {
        return view('livewire.solution-detail');
    }
}
  1. In your Livewire view (solution-detail.blade.php), you can now access the $solution property to display the details:
<div>
    <h1>{{ $solution->title }}</h1>
    <p>{{ $solution->description }}</p>
    <!-- Add navigation buttons or links to switch between items -->
</div>
  1. To link to the detail page from another page, you can use the route helper function to generate the URL:
<a href="{{ route('solutions.show', ['solution' => $solution->id]) }}">View Solution</a>

This setup uses route model binding to automatically resolve the Solution model instance for the given ID and inject it into the mount method of your Livewire component. When you navigate to the URL /solutions/{solution}, the corresponding solution is loaded without a full page refresh, and you can use Livewire to switch between items dynamically.

Remember to replace App\Models\Solution with the correct namespace and path to your Solution model, and adjust the view paths and variable names as needed for your application.

AlexSteele's avatar

it turned out that I looked at the issue wrong. the cause of the issue was that I was not doing an authentication check and it was routing me to the app layout instead of the guest layout which caused the route to appear to fail. but it wasn't actually failing and as soon as I changed the drop down menu to prevent showing the user's profile icon unless they are signed in, this error stopped.

Please or to participate in this conversation.