如何在Deno Fresh框架中无需<a>组件实现按钮触发页面导航？

Deno Fresh内置了客户端导航API，不用依赖<a>标签就能实现页面跳转，核心是使用navigate函数，具体实现如下：

步骤1：导入navigate函数 #

从Fresh的运行时模块导入该函数，它是专门用于客户端路由跳转的工具：

import { navigate } from "$fresh/runtime";

步骤2：绑定按钮点击事件实现跳转 #

给按钮的onClick事件添加处理函数，调用navigate并传入目标页面路径即可：

export default function HomePage() {
  return (
    <div>
      <button onClick={() => navigate("/about")}>
        跳转到关于页面
      </button>
    </div>
  );
}

可选：自定义导航行为 #

如果需要调整导航的历史记录行为，比如替换当前历史条目而不是新增，可以给navigate传入第二个参数：

navigate("/about", { replace: true });

补充说明 #

• 这种方式是客户端路由跳转，不会刷新整个页面，能保留页面状态，符合Fresh的单页应用特性。
• 如果确实需要强制刷新页面，也可以用原生JS的window.location.href = "/about"，但不推荐，会丢失客户端路由的优势。

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