Astro结合React开发时如何实现页面间路由跳转

你完全不需要集成react-router实现页面跳转，Astro自带和文件路由系统完全适配的跳转能力，不需要额外引入第三方路由库，也不会违背内置路由的设计初衷。

• .astro 组件场景：直接使用Astro内置的<Link>组件即可，能力和Next/Remix的<Link>对齐，默认支持链接预加载、无刷新客户端跳转，不会触发整页重载。使用方式：

---
// 直接从Astro内置模块导入，不需要额外安装依赖
import { Link } from 'astro:components';
---
<nav>
  <Link to="/posts">文章列表</Link>
  <Link to="/about">关于我</Link>
</nav>

• React 组件场景：两种零额外依赖的方案可选
  1. 普通跳转直接写原生<a>标签即可，Astro的客户端路由会自动捕获同域下的a标签跳转，默认自带预加载、无刷新跳转能力，不需要套任何自定义组件
  2. 需要编程式跳转（比如点击按钮、表单提交成功后跳页）时，直接调用Astro内置的navigate方法即可，示例：

// React组件内
import { navigate } from 'astro:transitions/client';

export default function SubmitButton() {
  const handleSubmit = async () => {
    // 省略表单提交逻辑
    await submitForm();
    // 提交成功后跳转到结果页
    navigate('/submit/success');
  }

  return <button onClick={handleSubmit}>提交表单</button>
}

注意：不要在Astro项目中额外集成react-router这类SPA路由库，这类库会独立接管路由逻辑，反而会和Astro内置的文件路由、视图过渡、资源预加载能力冲突，徒增包体积的同时还会丢失Astro默认的性能优势。

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