React Router 与嵌套路由（对比 @RequestMapping）

@Controller
public class UserController {

    @GetMapping("/user/list")
    public String list(Model model) {
        model.addAttribute("users", userService.findAll());
        return "user/list";     // 渲染一整页 Thymeleaf 模板
    }

    @GetMapping("/user/detail/{id}")
    public String detail(@PathVariable Long id, Model model) {
        model.addAttribute("user", userService.findById(id));
        return "user/detail";   // 又一整页，浏览器丢掉旧的重新画
    }
}

import { createRoot } from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from "./App";
import Home from "./pages/Home";
import UserList from "./pages/UserList";
import UserDetail from "./pages/UserDetail";
import NotFound from "./pages/NotFound";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,                              // 根布局：顶栏 + 页脚
    children: [
      { index: true, element: <Home /> },          // 访问 / 时显示
      { path: "users", element: <UserList /> },    // 访问 /users
      { path: "users/:id", element: <UserDetail /> }, // 动态段，第 31 篇展开
      { path: "*", element: <NotFound /> },        // 兜底 404
    ],
  },
]);

createRoot(document.getElementById("root")!).render(
  <RouterProvider router={router} />
);

import { Outlet, NavLink } from "react-router-dom";

function AdminLayout() {
  return (
    <div className="admin">
      <aside>
        {/* NavLink 命中当前路径时会自动加 active 类，高亮菜单 */}
        <NavLink to="/admin/dashboard">仪表盘</NavLink>
        <NavLink to="/admin/users">用户管理</NavLink>
        <NavLink to="/admin/settings">系统设置</NavLink>
      </aside>
      <main>
        <Outlet />  // 子路由渲染在这里；切菜单时只有这里变
      </main>
    </div>
  );
}

// 路由表：父路径 + children，路径自动拼接
{
  path: "/admin",
  element: <AdminLayout />,   // 切子页面时它不会重建
  children: [
    { index: true, element: <Dashboard /> },   // /admin
    { path: "users", element: <UserManage /> },    // /admin/users
    { path: "settings", element: <Settings /> },   // /admin/settings
  ],
}

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

function UserList({ users }: { users: User[] }) {
  return (
    <ul>
      {users.map(u => (
        <li key={u.id}>
          <Link to={`/users/${u.id}`}>{u.name}</Link>
        </li>
      ))}
    </ul>
  );
}

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

function LoginForm() {
  const navigate = useNavigate();

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    const ok = await login(formData);
    if (ok) {
      navigate("/dashboard", { replace: true });
      // replace：替换当前历史记录，用户按「后退」回不到登录页
    } else {
      navigate(-1);  // 负数是在历史里后退，等价于浏览器的返回
    }
  }
  // ……表单渲染省略
}