推荐答案
在 Next.js 中，useRouter 钩子用于访问路由对象，允许你在函数组件中获取路由信息并执行导航操作。以下是一个简单的示例：
-- -------------------- ---- -------
------ - --------- - ---- --------------
-------- ------------- -
----- ------ - ------------
----- -------------- - -- -- -
----------------------
--
------ -
-----
-------- ---------------------
------- ----------------------------------------
------
--
-
------ ------- ------------在这个示例中，useRouter 钩子返回一个路由对象 router，你可以通过 router.pathname 获取当前路径，并通过 router.push 方法进行页面导航。
本题详细解读
1. useRouter 钩子的基本用法
useRouter 是 Next.js 提供的一个 React 钩子，用于在函数组件中访问路由对象。通过这个钩子，你可以获取当前的路由信息，如路径、查询参数等，并且可以执行导航操作。
2. 路由对象的常用属性和方法
pathname: 当前页面的路径，不包括查询参数。query: 包含当前路由的查询参数的对象。push(url, as, options): 用于导航到指定 URL 的方法。url是目标路径，as是可选的路由别名，options是导航选项。replace(url, as, options): 类似于push，但不会在浏览器历史记录中创建新条目。back(): 导航到上一个页面。reload(): 重新加载当前页面。
3. 示例代码解析
在示例代码中，useRouter 钩子被用来获取当前路径并显示在页面上。当用户点击按钮时，router.push('/about') 会将用户导航到 /about 页面。
4. 注意事项
useRouter只能在函数组件中使用，不能在类组件中使用。router.push和router.replace方法可以接受一个对象作为参数，用于传递查询参数或哈希值。例如：router.push({ pathname: '/about', query: { id: '123' } })。- 如果你需要在页面加载时执行某些操作，可以在
useEffect钩子中使用router对象。
通过 useRouter 钩子，你可以轻松地在 Next.js 应用中实现动态路由和导航功能。