Next.js 14 最佳实践系列【来自官方标准】-第5章 页面之间导航

  1. 第4章传送门:Next.js 14 最佳实践系列【来自官方标准】-第4章 创建布局和页面 - 掘金
  2. 切记:只要能坚持下来,对前端领域的认知会有一个质的飞跃。现在是基础阶段,之所谓万丈高楼平地起,地基很重要。

本章节可以学到:

  1. 如何使用next/link组件
  2. 使用usePathname()hook
  3. 导航在Next.js中是如何工作的

为什么优化导航

传统的页面导航使用<a>标签,这会使整个页面刷新。现在项目左侧侧边栏使用的正是a标签,可以点击一下查看效果.


组件

在Next.js中,可以使用<Link/>组件在应用程序中页面之间进行链接。<Link />组件允许使用JavaScript进行客户端导航

在项目中,打开/app/ui/dashboard/nav-links.tsx,然后导入组件将a标签进行替换,

javascript 复制代码
import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';

// ------在这里----------
import Link from 'next/link';
 
// ...
 
export default function NavLinks() {
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          // -----替换<a>标签
          <Link
            key={link.name}
            href={link.href}
            className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

再次运行项目查看效果,会看到页面之间的导航没有刷新整个页面。虽然应用程序在部分内容是在服务器上渲染后呈现出来,但是没有刷新整个页面,看起来就想一个WEB应用。那这是为什么呢?

自动代码分割和预取代码

为了改善导航的体验,Next.js自动按照路由段对应用进行代码分割。这与传统的React SPA不同,浏览器在初始加载时加载所有的应用程序代码

按路由拆分代码意味着页面变得孤立。如果某个页面抛出错误,程序的其余部分还可以工作。

此外,在生产环境中,<Link>组件出现在浏览器的视口中,Next.js就会自动在后台中预取链接路由的代码。当用户点击链接时,目标页面的代码已经在后台加载,这使得页面转换几乎是同时的。


模式:显示活动链接

显示活动的链接指示用户他们所在的页面,那就需要获取当前路由的路径。Next.js提供可以个usePathname()的钩子。使用这个钩子需要将nav-links.tsx转换为客户端组件。注意将React的"use client"指令添加到文件顶部:

javascript 复制代码
'use client';
 
import {
  UserGroupIcon,
  HomeIcon,
  InboxIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
 
// ...

接下来获取pathbane变量数据:

javascript 复制代码
export default function NavLinks() {
  const pathname = usePathname();
  // ...
}

可以使用clsx库,将处于活跃状态的链接加上对应的类名。当link.href与路径名匹配时,链接以蓝色文本和浅蓝色背景形式

javascript 复制代码
'use client';
 
import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import clsx from 'clsx';
 
// ...
 
export default function NavLinks() {
  const pathname = usePathname();
 
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            {/* ------------这里----------- */}
            className={clsx(
              'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
              {
                'bg-sky-100 text-blue-600': pathname === link.href,
              },
            )}
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

下一章开始与官网有去区别,教大家如何搭建无头CMS,供我们做接口调用。而不是连接数据库,毕竟数据库这种使用的场景目前来说还不成熟(国内)。

相关推荐
m0_748255267 分钟前
前端安全——敏感信息泄露
前端·安全
鑫~阳2 小时前
html + css 淘宝网实战
前端·css·html
Catherinemin2 小时前
CSS|14 z-index
前端·css
2401_882727573 小时前
低代码配置式组态软件-BY组态
前端·后端·物联网·低代码·前端框架
NoneCoder3 小时前
CSS系列(36)-- Containment详解
前端·css
anyup_前端梦工厂3 小时前
初始 ShellJS:一个 Node.js 命令行工具集合
前端·javascript·node.js
5hand4 小时前
Element-ui的使用教程 基于HBuilder X
前端·javascript·vue.js·elementui
GDAL4 小时前
vue3入门教程:ref能否完全替代reactive?
前端·javascript·vue.js
六卿4 小时前
react防止页面崩溃
前端·react.js·前端框架
z千鑫4 小时前
【前端】详解前端三大主流框架:React、Vue与Angular的比较与选择
前端·vue.js·react.js