在 Next.js 中，在构建自己的应用程序时，路由是不可或缺的一部分。路由是指确定应用程序 URL 路径和在这些路径下呈现的页面或视图之间的映射关系。在本文中，我们将深入探讨 Next.js 中路由的基本用法。
简介
Next.js 提供了两种路由方式：客户端路由和服务器端路由。 下面，让我们看一下如何使用它们。
客户端路由
客户端路由在浏览器中完成，因此我们可以避免从服务器请求完整页面。这提高了应用程序的响应速度和性能。
Next.js 的客户端路由通过使用 React 的 <Link> 组件实现。这个组件包装一个普通的 HTML <a> 标签，并生成一个路由链接。当用户点击这个链接时，Next.js 使应用程序从一种页面路径到另一种页面路径。 我们可以在页面模块或组件中使用 <Link>。
-- -------------------- ---- -------
------ ---- ---- -----------
------ ------- -------- ------ -
------ -
-----
-----------
----
----
----- --------------
-----------
-------
-----
----
----- --------------------
------------
-------
-----
-----
------
-
-在上面的代码中，我们在首页页面使用了两个不同的 <Link> 组件，其中一个指向“about”页面，另一个指向具有路径“/posts/first”的第一篇博客文章。注意这个定义一定要放在渲染标签之前，典型的写法是先 import 。当用户点击这两个链接中的任何一个时，Next.js 将加载目标页面，而不是整个页面。由于我们仅加载目标页面，因此仅对目标页面进行的作出的更改会影响 DOM。（注意：关于 React 组件的使用，这里不做过多解释）
服务器端路由
服务器端路由在服务器上完成，因此我们需要从服务器请求完整页面。 当我们需要渲染动态页面时，我们需要使用服务器端路由，因为只有服务器有某些数据。 例如，如果我们需要从服务器获取特定帖子的详细信息并将其呈现给用户，我们需要使用服务器端路由。适用于动态渲染和复杂的数据逻辑处理。
我们可以使用 Next.js 的内置服务端路由机制来处理我们的应用程序的许多不同的 URL。 每个页面都是一个在服务器上执行的 node.js 模块，Next.js 负责将 HTTP 请求路径映射到可以生成页面内容的文件。文件名应与 URL 路径相匹配。例如，我们可以在“pages”文件夹中创建一个包含服务器端路由的文件“/pages/posts/[id].js”，来渲染帖子详情页面。以下是一个简单的例子：
-- -------------------- ---- -------
------ - --------- - ---- -------------
------ ------- -------- ------ -
----- ------ - -----------
----- - -- - - ------------
------ -
-----
------------------
------
-
-在这个例子中，我们使用了 useRouter 钩子来从 URL 中获取当前的“id”参数，并将其显示在页面上。
取消浏览器自动滚动
在 Next.js 中，当我们使用服务器端路由切换页面时，浏览器会自动滚动到页面的顶部。但是我们可能希望页面切换时保持滚动位置不变，这可以通过添加 scrollToTop 参数来实现。下面是一个例子：
<Link href="/about" scroll={false}><a>关于我们</a></Link>在这个例子中，我们将 scroll 属性设置为 false，以保留滚动位置。
总结
在本文中，我们深入探讨了 Next.js 中路由的基本用法。我们看到了如何使用客户端路由和服务器端路由，在页面中使用 <Link> 组件进行导航，并使用 useRouter 钩子从 URL 中提取参数。我们介绍了如何防止浏览器自动滚动到页面的顶部。希望这些信息对于学习和使用 Next.js 应用程序的路由机制是有很大帮助和指导作用的。
参考文献
- Next.js 文档：https://nextjs.org/docs/
- React 文档：https://reactjs.org/
- MDN Web Docs：https://developer.mozilla.org/zh-CN/docs/Web
- CSS Tricks：https://css-tricks.com/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64570573968c7c53b09e2746