使用Livewire 3 wire:navigate时显示当前年份而非页面内容的问题

核心错误点及修正方案 #

1. 视图路径引用错误 #

你的Main组件和Account组件都错误引用了视图路径：

• Main组件（Livewire/App.php）：原代码返回view('app')，但实际布局视图位于resources/views/livewire/app.blade.php，需修改为：

  public function render()
  {
      return view('livewire.app');
  }
  

• Account组件（Livewire/Account.php）：原代码extends('app')指向不存在的根目录视图，需改为指向livewire子目录下的布局：

  public function render()
  {
      return view('livewire.account')
          ->extends('livewire.app')
          ->section('content');
  }
  

2. 缺少路由定义 #

必须在routes/web.php中添加对应组件的路由，否则访问/account会加载Laravel默认的欢迎页面（其中包含年份“2023”）：

use App\Livewire\Main;
use App\Livewire\Account;

Route::get('/', Main::class);
Route::get('/account', Account::class);

3. Livewire 3布局渲染逻辑优化（可选但推荐） #

Livewire 3更推荐使用layout()方法替代传统的extends()+section()写法，同时调整布局文件的内容插槽：

• 修改Account组件的render方法：

  public function render()
  {
      return view('livewire.account')
          ->layout('livewire.app');
  }
  

• 修改布局文件（resources/views/livewire/app.blade.php）：将@yield('content')替换为{{ $slot }}，让组件内容自动填充到布局中：

  <div class="container-xxl flex-grow-1 container-p-y">
      {{ $slot }}
  </div>
  

4. 主组件内容补充（可选） #

当前Main组件直接返回布局视图，没有首页内容，可创建resources/views/livewire/main.blade.php添加首页内容：

<div>
    Home Page
</div>

然后修改Main组件的render方法：

public function render()
{
    return view('livewire.main')
        ->layout('livewire.app');
}

内容的提问来源于stack exchange，提问作者Mirshad Rifas