Livewire分页异常：点击分页链接出现404错误

问题现象 #

使用单Livewire组件处理不同分类产品的分页展示，页面首次加载时产品正常分页、分页链接显示正确，但点击分页按钮后出现404错误，请求URL变为https://url.test/products/null?page=1，而非预期的https://url.test/products/category_a?page=1或对应分类路径。

相关代码 #

Livewire组件代码

class Products extends Component   {
   
   use WithPagination;

   public $currentRoute;

   public function mount() {
       $this->currentRoute = Route::currentRouteName();
   }

   public function render() {
       if ($this->currentRoute == 'show-category-a') {
           return view('components.products',  [
               'products_all' => Product::category_a()->paginate(12),
               'product_type' => "type1",   
           ]);
        }

        if ($this->currentRoute == 'show-category-b') {
            return view('components.products',  [
                'products_all' => Product::category_b()->paginate(12),
                'product_type' => "type2",
            ]);
        }
    }
  }

Blade视图代码

<ul role="list" class="">
    @foreach($products_all as $product)
         @include('components.products.product-card', ['product' => $product])
    @endforeach
</ul>

<div class="mt-10 ">
 {{ $products_all->links() }}
</div>

路由配置

Route::get('/products/category_a', Products::class)->name('show-category-a');
Route::get('/products/category_b', Products::class)->name('show-category-b');

问题原因 #

问题出在$currentRoute的初始化时机：mount方法仅在组件首次加载时执行，此时获取的是分类路由名称；但Livewire处理分页请求时，会通过内部路由重新初始化组件，此时Route::currentRouteName()获取的是Livewire的内部路由，而非原分类路由，导致$currentRoute为空。分页链接生成时依赖该路由名称拼接路径，最终出现null路径引发404。

快速修复方法 #

将路由名称的获取从mount移到render方法中，确保每次组件渲染时都能拿到当前请求的正确路由名称：

class Products extends Component
{
    use WithPagination;

    public function render()
    {
        $currentRoute = Route::currentRouteName();
        
        if ($currentRoute == 'show-category-a') {
            return view('components.products', [
                'products_all' => Product::category_a()->paginate(12),
                'product_type' => "type1",   
            ]);
        }

        if ($currentRoute == 'show-category-b') {
            return view('components.products', [
                'products_all' => Product::category_b()->paginate(12),
                'product_type' => "type2",
            ]);
        }
        
        // 无匹配路由时返回404
        return abort(404);
    }
}

推荐优化实现方案 #

通过路由参数传递分类标识，简化路由配置与组件逻辑，同时彻底避免路由名称依赖问题：

1. 修改路由配置 #

Route::get('/products/{category}', Products::class)->name('show-category');

2. 调整Livewire组件 #

class Products extends Component
{
    use WithPagination;

    public $category;

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

    public function render()
    {
        switch($this->category) {
            case 'category_a':
                $products = Product::category_a()->paginate(12);
                $productType = 'type1';
                break;
            case 'category_b':
                $products = Product::category_b()->paginate(12);
                $productType = 'type2';
                break;
            default:
                abort(404);
        }

        return view('components.products', [
            'products_all' => $products,
            'product_type' => $productType,
        ]);
    }
}

优势说明 #

• 路由配置更简洁，无需为每个分类单独定义路由；
• 分页请求时，Livewire会自动保留category参数，生成正确的分页URL（如https://url.test/products/category_a?page=2）；
• 组件逻辑更清晰，直接通过参数区分分类，避免路由名称判断的冗余。

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