动态路由与参数解析

@GetMapping("/users/{id}")
public String detail(@PathVariable Long id, Model model) {
    // Spring 把 URL 里的 "42" 抽出来，还顺手转成了 Long
    model.addAttribute("user", userService.findById(id));
    return "user/detail";
}

import { useParams } from "react-router-dom";

function UserDetail() {
  // 路由表注册的是 "users/:id"，这里用同名 key 取
  const { id } = useParams<{ id: string }>();

  return <h2>用户 #{id} 的详情</h2>;
}

import { useSearchParams } from "react-router-dom";

function UserOrders() {
  const [searchParams, setSearchParams] = useSearchParams();

  // 读：get 返回 string | null，默认值要自己兜（对照 defaultValue）
  const page = Number(searchParams.get("page") ?? "1");
  const status = searchParams.get("status") ?? "all";

  function selectStatus(next: string) {
    // 写：函数式更新，prev 是当前的查询参数，改完整体替换
    setSearchParams(prev => {
      prev.set("status", next);
      prev.set("page", "1");   // 筛选变了，页码回 1
      return prev;
    });
    // 这一次 setSearchParams 就是一次客户端导航（默认压入历史）
    // 翻页不想要历史记录的话：setSearchParams(prev => ..., { replace: true })
  }

  return (
    <select value={status} onChange={e => selectStatus(e.target.value)}>
      <option value="all">全部</option>
      <option value="paid">已支付</option>
      <option value="refunded">已退款</option>
    </select>
  );
}

import { useNavigate, useLocation } from "react-router-dom";

// 守卫发现没登录：带着「用户本来想去哪」跳去登录页（第 35 篇展开）
navigate("/login", {
  state: { from: location.pathname },
  replace: true,
});

// 登录页：登录成功，从 state 里取出原目的地
function LoginPage() {
  const { state } = useLocation();
  const from = (state as { from?: string } | null)?.from ?? "/dashboard";
  navigate(from, { replace: true });
}

// 坑：没有依赖数组时，effect 只在挂载时跑一次
// 之后 id 从 1 变 2，effect 假装不知道——页面停在旧数据
useEffect(() => {
  loadUser(id);
}, [id]);    // 解法一：把 id 放进依赖数组，id 变了就重跑（第 10 篇）

// 解法二：有时你就是要「每个 id 一个全新实例」——
// 重置滚动条、重置表单、重放动画。key 一变，React 直接
// 丢弃旧实例、重新挂载（第 7 篇 key 的老规则，用在路由上）
<UserDetail key={id} />

<Link to="orders">他的订单</Link>  // → /users/42/orders，:id 自动拼上
<Link to="..">返回列表</Link>    // → /users，相对当前路由层级

import { useParams, useSearchParams, Link, Navigate } from "react-router-dom";

function UserDetailPage() {
  const { id } = useParams<{ id: string }>();
  const [searchParams] = useSearchParams();
  const tab = searchParams.get("tab") ?? "profile";

  // 校验：id 必须是正整数。Number("12abc") 是 NaN，直接拦下
  const userId = Number(id);
  if (id === undefined || !Number.isInteger(userId) || userId <= 0) {
    return <Navigate to="/404" replace />;  // 非法参数，重定向走人
  }

  return (
    <div>
      <nav>
        // 只改查询参数、路径参数原样保留的相对写法
        <Link to="?tab=profile">资料</Link>
        <Link to="?tab=orders">订单</Link>
      </nav>
      {tab === "orders"
        ? <UserOrders userId={userId} />
        : <UserProfile userId={userId} />}
    </div>
  );
}