10 · 路由与数据请求

路由：把 URL 当状态#

React Router 用声明式路由映射 URL ↔ 组件：

1
<Routes>
2
  <Route path="/users/:id" element={<UserDetail />} />
3
  <Route path="*" element={<NotFound />} />
4
</Routes>
5
// 组件内取参数
6
const { id } = useParams();

路由本质是”把应用状态的一部分外化到 URL”，刷新/分享链接都能还原页面，对 SEO 和可分享性至关重要。

自己请求数据#

1
function UserDetail() {
2
  const { id } = useParams();
3
  const { data, loading } = useFetch(`/api/users/${id}`); // 第07篇的 useFetch
4
  if (loading) return <Spinner />;
5
  return <Profile user={data} />;
6
}

够用，但缓存、去重、重试、竞态都要自己写。

SWR / React Query：专业数据层#

1
import useSWR from "swr";
2
const { data, error, isLoading } = useSWR(`/api/users/${id}`, fetcher);

SWR（Stale-While-Revalidate）自动：缓存响应、标签页聚焦时重新验证、请求去重、失败重试。React Query 更重，支持 mutations、无限加载、离线缓存。

经验：项目一旦有”多个地方用同一份数据、需要自动刷新”的需求，直接用 React Query，别自己造轮子。

小结#

React Router 把 URL 当共享状态，可还原、可分享。
简单请求 useEffect+fetch 够用。
多组件共享数据、需缓存/重试/聚焦刷新 → SWR / React Query。
数据层库解决的是”重复造缓存/竞态/去重的轮子”问题。

练习#

用 React Router 搭一个含 / 列表页和 /items/:id 详情页的小应用。
用 useSWR 替换手写 useFetch，对比是否自动处理了重复请求。
给详情页加”焦点回到标签页时自动刷新”（SWR 的 focusThrottleInterval / 默认行为）。