在 React 项目中，我们经常使用单页应用（SPA）来展示页面。然而对于某些需要多个页面的项目，单页应用并不太适用。在这种情况下，我们需要考虑多页应用（MPA）。但是，使用 React 来开发 MPA 会导致很多问题。 Next.js 就是一种解决这个问题的方式。
本文将介绍在 React 项目中使用 Next.js 来实现多页应用的方法。
Next.js 简介
Next.js 是一种基于 React 的服务端渲染框架，可以用于创建静态网站、服务器渲染的应用程序（SSR）和单页应用。
Next.js 的主要特点包括：
- 支持 React：Next.js 是为 React 应用程序设计的，使用 Next.js 可以轻松构建高质量的 React 应用程序。
- 服务端渲染：使用 Next.js 可以在服务器上渲染 React 组件，这可以提高网站的性能和 SEO。
- 自动代码拆分：Next.js 自动将应用程序拆分为小块，以减少初始加载时间和提高性能。
- 静态文件服务：Next.js 可以用于服务静态文件，如图像和 CSS。
- 简单的部署：Next.js 项目可以轻松地部署到现代服务器或静态网站托管器上。
实现多页应用
使用 Next.js 实现多页应用非常简单，只需要使用多个页面即可。在创建 Next.js 应用程序时，会默认创建一个 pages 文件夹，其中包含一个名为 index.js 的文件，这是 Next.js 的默认入口文件。
在 pages 文件夹中创建多个文件即可创建多个页面。例如，我们可以创建名为 about.js 的文件，该文件将成为应用程序的 /about 页面。我们可以在该文件中编写 React 组件，就像在单页应用中编写组件一样。
例如，我们可以创建一个 about.js 文件，其中包含如下代码：
-- -------------------- ---- -------
------ ----- ---- -------
----- --------- - -- -- -
------ -
-----
--------- ---------
------- -- --- ----- ---------
------
-
-
------ ------- ---------在该文件中，我们定义了一个名为 AboutPage 的 React 组件，该组件中包含了一个标题和一个段落。我们还将该组件导出，以便 Next.js 可以将其用作 /about 页面的内容。
我们还可以创建其他页面，例如 contact.js：
-- -------------------- ---- -------
------ ----- ---- -------
----- ----------- - -- -- -
------ -
-----
----------- ---------
------- -- --- ------- ---------
------
-
-
------ ------- -----------现在我们已经创建了多个页面，但是如何在应用程序中访问这些页面呢？
导航链接
Next.js 提供了一个 <Link> 组件，用于在应用程序中导航到其他页面。在使用 <Link> 组件时，我们将用于导航的 URL 作为 href 属性传递给该组件。
例如，我们可以在 index.js 文件中添加导航链接到 /about 和 /contact 页面：
-- -------------------- ---- -------
------ ----- ---- -------
------ ---- ---- -----------
----- -------- - -- -- -
------ -
-----
-------- ---------
------- -- --- ---- ---------
-----
----
----
----- --------------
------------
-------
-----
----
----- ----------------
--------------
-------
-----
-----
------
------
-
-
------ ------- --------在该文件中，我们导入了 <Link> 组件，并在 <nav> 元素中创建了两个导航链接。我们使用 href 属性将链接指向 /about 和 /contact 页面，并使用 <a> 元素作为链接的内容。
路由参数
有时我们需要在 URL 中传递参数到页面中。例如，我们可能需要在 /post/123 页面中显示特定 ID 的文章。下面我们将介绍如何在 Next.js 中实现这种路由参数的传递。
首先，我们需要创建一个名为 [id].js 的文件。注意，文件名必须以 [ 和 ] 开始和结束，并且可以包含任何字符。在这个文件中，我们可以通过 useRouter 钩子来接收传递的参数，如下所示：
-- -------------------- ---- -------
------ - --------- - ---- -------------
----- -------- - -- -- -
----- ------ - -----------
----- - -- - - ------------
------ -
-----
-------- ---------
------- -- --- ---- ---------
------
-
-
------ ------- --------在该文件中，我们导入了 useRouter 钩子，该钩子可以让我们在 Next.js 中处理路由。我们使用 router.query 对象来接收传递的参数，并在页面中使用它们。
现在，我们可以使用链接传递参数到路由，例如：
<Link href="/post/[id]" as="/post/123"> <a>Post 123</a> </Link>
在该链接中，我们使用 as 属性将路径指向 /post/123，其中 123 是我们要传递的参数。
总结
Next.js 是一种基于 React 的服务端渲染框架，可以用于创建静态网站、服务器渲染的应用程序（SSR）和单页应用。使用 Next.js 可以轻松创建多页应用，只需要在 pages 文件夹中创建多个文件即可。使用 <Link> 组件可以在应用程序中导航到其他页面，使用路由参数可以在页面之间传递参数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c3db6968c7c53b075c9a2