编程式路由
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 35 课，共 47 课。
<Link> 用于处理用户主动选择的导航。但有时由应用来决定：表单提交后、登录成功后，或者点击按钮并完成相应操作后。
对于这些情况，你可以使用 useRouter 从代码中导航：
'use client';
import { useRouter } from 'next/navigation';
export default function CheckoutButton() {
const router = useRouter();
return (
<button onClick={() => router.push('/thanks')}>
Check out
</button>
);
}路由器对象提供以下功能：
router.push(url)：前往该页面，并将其添加到历史记录中router.replace(url)：前往该页面，并替换当前记录（无法返回到该记录）router.back()：后退一步router.refresh()：重新运行当前路由的服务器渲染
有两条规则值得记住。第一，useRouter 来自 next/navigation，而不是旧的 next/router。第二，它是一个 Hook，所以需要 'use client'。
当普通链接就能满足需求时，就使用链接：它是真正的 <a>，因此可以通过键盘、屏幕阅读器和鼠标中键点击来使用。当导航是某件事的结果，而不是事情本身时，再使用 router.push。
挑战
简单首页上的“Order now”按钮不起作用。让它实现页面跳转。
- 在
components/OrderButton.jsx中，使用useRouter()获取路由器。 - 点击时，使用
router.push将用户带到/menu。
不要改动按钮的 id="order-btn"：测试会点击它。
亲手试试
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
