应用程序中的路线/导航

导航是指用户浏览 Next.js 网站的方式。路由和链接是可用于定义站点导航的两种主要方法。

由于每个组件的内置路由定义，Next.js 中的路由很容易理解。要优化应用程序路由，了解索引、嵌套和动态路由非常重要。

 指数

像 index.js 这样的索引文件将路由到应用程序的起始点 / ，而不是 /index 。您可以通过创建多个 index 文件来利用这一点，这些文件充当站点内不同导航路径的登陆页面或起点。

<span><span>-</span><span>&nbsp;pages</span></span><br><span><span>&nbsp;&nbsp;</span><span>-</span><span>&nbsp;index</span><span>.</span><span>js&nbsp;</span><span>#</span><span>&nbsp;found&nbsp;at&nbsp;</span><span>`/`</span></span><br><span><span>&nbsp;&nbsp;</span><span>-</span><span>&nbsp;users</span></span><br><span><span>&nbsp;&nbsp;&nbsp;&nbsp;</span><span>-</span><span>&nbsp;index</span><span>.</span><span>js&nbsp;</span><span>#</span><span>&nbsp;found&nbsp;at&nbsp;</span><span>`/users`</span></span><br><span><span>&nbsp;&nbsp;&nbsp;&nbsp;</span><span>-</span><span>&nbsp;account</span><span>.</span><span>js&nbsp;</span><span>#</span><span>&nbsp;</span><span>`/users/account`</span></span><br>

例如， pages 下的 index.js 页面是在不输入其他路由的情况下到达的站点的主页。 users 下的第二个 index.js 是 users 路径的登录页面，通过输入 <siteName>/users 到达。

 嵌套

嵌套路由是只能通过共享父路由访问的路由，例如 /users/account 。您可以将嵌套路由视为计算机上的嵌套文件，因为您必须导航所有更高的组件才能到达嵌套组件。

 动态路线

我们还可以在路由中包含参数以允许可变行为。动态页面是用方括号定义的。这个功能本质上允许我们像函数一样将信息传递到页面。

例如，我们可以重新制作 user 组件，以允许每个用户拥有自己的帐户页面。

<span><span>#</span><span>&nbsp;</span><span>...</span></span><br><span><span>&nbsp;&nbsp;</span><span>-</span><span>&nbsp;users</span></span><br><span><span>&nbsp;&nbsp;&nbsp;&nbsp;</span><span>-</span><span>&nbsp;index</span><span>.</span><span>js</span></span><br><span><span>&nbsp;&nbsp;&nbsp;&nbsp;</span><span>-</span><span>&nbsp;</span><span>[</span><span>account</span><span>.</span><span>js</span><span>]</span><span>&nbsp;</span><span>#</span><span>&nbsp;</span><span>`/users/[accountName]`</span></span><br>

通过此设置，用户可以在 URL 中输入他们的帐户名称，并立即转到他们的帐户信息页面，而不是从 users 开始。换句话说，我可以输入我的帐户名 /users/educative 来访问一个动态页面，该页面填充与输入的帐户名相关的信息。

account.js 文件需要包含条件语句，告诉它根据传递的参数做什么。

1
2
3
4
5

   if(id == 'one'){
      return postOne;
   }else if(id == 'two'){
      return postTwo;
   }  

 链接

您还可以引入客户端点击链接，以允许用户在没有 URL 栏的情况下浏览网站。 Link React 组件是 Next.js 中链接的关键。

Link 组件采用 href 参数，其中填充了目标组件的文件路由。这将在当前页面和在输入的路由中找到的页面之间创建链接。例如，如果您将 <Link href= "/users/"> 添加到 hello.js ，您将创建一个从 hello.js 到 users 着陆页的链接。