本文介绍在 Astro 构建的静态网站中，如何通过 URL 路由参数（如 /country/us）实现数据过滤，并利用语义化路由 + 客户端跳转，确保用户选择的筛选项在页面切换时自然保留，无需客户端状态管理或服务端支持。
本文介绍在 astro 构建的静态网站中，如何通过 url 路由参数（如 `/country/us`）实现数据过滤，并利用语义化路由 + 客户端跳转，确保用户选择的筛选项在页面切换时自然保留，无需客户端状态管理或服务端支持。
在 Astro 中实现“按选项过滤数据并跨页保持选中状态”，核心思路是将用户选择转化为 URL 路径参数，而非依赖内存中的 JavaScript 状态（如 useState）。这完全契合 Astro 的静态优先、服务端渲染（SSR）友好和渐进式增强的设计哲学——既保证首屏性能与 SEO，又实现平滑的交互体验。
✅ 正确做法：基于文件系统的动态路由（File-based Dynamic Routing）
Astro 原生支持 [param] 动态路由。我们以国家筛选为例，假设数据源为 src/data.json：
[
{ "country": "us", "title": "United States" },
{ "country": "gb", "title": "Great Britain" },
{ "country": "jp", "title": "Japan" }
]1. 创建动态路由页面：src/pages/country/[country].astro
---
import data from '../../data.json';
const { country } = Astro.params;
const countryData = data.find(item => item.country === country);
if (!countryData) {
throw new Error(`Country "${country}" not found`);
}
---
<h1>{countryData.title}</h1>
<p>Country code: <code>{country}</code></p>该页面会自动响应 /country/us、/country/gb 等路径，Astro 在构建时静态生成对应 HTML 文件（如 dist/country/us/index.html），零运行时开销。
2. 在首页（或其他入口页）添加筛选下拉框：src/pages/index.astro
---
import data from '../data.json';
---
<select id="country-select">
<option disabled selected>Select a country</option>
{data.map(item => (
<option value={item.country} key={item.country}>
{item.title}
</option>
))}
</select>
<script is:inline>
const select = document.getElementById('country-select');
select?.addEventListener('change', (e) => {
const value = e.target.value;
if (value) {
window.location.href = `/country/${value}`;
}
});
</script>?
is:inline确保脚本直接注入 HTML，避免额外请求；事件监听器触发的是原生页面跳转，因此浏览器地址栏更新、历史记录写入、SEO 友好 —— 同时，用户点击「后退」或刷新页面，当前国家页仍能正确加载，因为状态已固化在 URL 中。
⚠️ 关键注意事项
-
不要用
localStorage或URLSearchParams模拟状态：虽然可行，但违背 Astro 静态路由优势，且易导致 SSR/CSR 不一致、SEO 降级、缓存失效等问题。 -
务必校验路由参数：如示例中
if (!countryData)抛错，防止 404 页面返回空内容（可配合 Astro 的onError或自定义 404 页面增强健壮性）。 -
支持键盘导航与无障碍：
<select></select>天然支持 Tab 键切换和屏幕阅读器，比自定义下拉组件更可靠。 -
如需“回首页”功能：可在
/country/[country].astro中添加<a href="/">← Back to home</a>，保持导航闭环。
✅ 总结
Astro 的 [country].astro 动态路由机制，天然将用户意图（选择国家）映射为可分享、可缓存、可索引的 URL。配合简单的 DOM 事件跳转，即可实现「过滤即路由、状态即 URL」的优雅方案——无需框架状态管理、不引入客户端 hydration 开销，真正发挥静态站点的性能与可靠性优势。
