InertiaJS手动访问异常：部分场景触发整页刷新，局部加载失效

常见原因及排查方案 #

1. 原生表单默认提交行为未阻止 #

如果用原生<form>标签包裹提交按钮，却没阻止浏览器默认的表单提交行为，就会触发整页刷新。比如错误写法：

<form onSubmit={() => form.post('/api/update')}>
  <button type="submit">保存</button>
</form>

这里箭头函数没接收event参数并执行preventDefault()，浏览器会走默认的表单提交流程。

修复方式：

<form onSubmit={(e) => {
  e.preventDefault();
  form.post('/api/update');
}}>

或者直接抛弃原生<form>标签，用按钮onClick触发提交（Inertia的useForm不需要依赖原生表单）：

<button onClick={() => form.post('/api/update')}>保存</button>

2. Inertia Router调用方式错误 #

使用router.post/router.delete时，若直接把函数绑定到onClick事件，会导致函数立即执行而非点击时执行，引发意外请求和整页刷新。比如错误写法：

<button onClick={router.post('/api/delete', { id: item.id })}>删除</button>

修复方式：用箭头函数包裹调用逻辑：

<button onClick={() => router.post('/api/delete', { id: item.id })}>删除</button>

3. Laravel控制器响应不符合Inertia规范 #

如果控制器返回的不是Inertia兼容的重定向响应，会触发整页刷新：

• 重定向目标需为内部路由（外部域名重定向Inertia会自动触发整页刷新，属于正常行为）
• 避免返回普通HTML响应，确保用Laravel的redirect()助手，比如：

// 正确写法
return redirect()->route('dashboard')->with('success', '操作成功');

// 错误写法（返回完整HTML页面，触发整页刷新）
return view('dashboard');

4. 路由未被Inertia中间件处理 #

如果相关路由没加入包含HandleInertiaRequests中间件的路由组，请求会返回完整HTML页面，导致Inertia触发整页刷新。检查routes/web.php：

// 确保所有应用路由都在该组内
Route::middleware(['web', \App\Http\Middleware\HandleInertiaRequests::class])->group(function () {
    Route::resource('items', ItemController::class);
    // 其他路由...
});

5. 未捕获的JavaScript错误 #

页面存在未捕获的JS错误时，会中断Inertia的请求处理逻辑，导致浏览器 fallback到整页刷新。打开浏览器控制台（F12），查看是否有报错，比如：

• useForm实例未正确初始化
• 提交时引用了未定义的变量
• 组件渲染错误

总结 #

这种问题几乎都是代码实现问题，按上述顺序逐一排查，基本能定位并解决问题。

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