使用Laravel Inertia React实现搜索功能时遇Ziggy参数错误求助

问题根源 #

你的后端路由定义了路径参数{query}，但前端调用route('permission.search')时未传入这个必填的路径参数，导致Ziggy抛出错误。同时你对Inertia的get方法用法也存在偏差。

解决方案1：适配路径参数写法 #

前端代码修改 #

将submitQuery函数调整为：

const submitQuery = () => {
  // 用Ziggy的route函数生成正确路由，传入必填的路径参数
  const targetUrl = route('permission.search', { query: query });
  // 调用Inertia的get方法，直接传入生成好的完整URL
  get(targetUrl);
};

说明：Ziggy的route函数第二个参数是路由参数对象，这里路由要求传入query参数，所以要传{ query: query }（前者是路由定义的参数名，后者是你的state变量）。

可选优化（非强制） #

为了代码语义更统一，可将控制器的参数名和路由参数对齐：

public function search($query){
    dd($query);
}

解决方案2：改用查询字符串参数（更符合搜索场景） #

如果更倾向于用?query=xxx这种常规搜索参数格式，可做如下调整：

后端路由修改 #

去掉路径参数，改为普通GET路由：

Route::get('/permission/search', [\App\Http\Controllers\PermissionController::class, 'search'])
    ->middleware(['auth','verified'])
    ->name('permission.search');

控制器修改 #

通过请求对象获取查询参数：

public function search(){
    $keyword = request('query');
    dd($keyword);
}

前端代码修改 #

const submitQuery = () => {
  // 调用get方法，在options的params中传入查询字符串参数
  get(route('permission.search'), { params: { query: query } });
};

这样请求会变成/permission/search?query=你的关键词，更符合搜索功能的常规设计。

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