现金澳门新银河app平台咱们好像明晰的分别哪个组件来自于那里-澳门银银河官方网IOS/安卓全站最新版下载

书接上回现金澳门新银河app平台，到现在为止，您的诳骗门径只须一个主页。让咱们学习何如使用布局和页面创建更多蹊径。

在本章之中咱们需要究诘：

dashboard使用文献系统路由创建路由。了解创建新蹊径段时文献夹和文献的作用。创建不错在多个姿色板页面之间分享的嵌套布局。了解什么是共置、部分渲染和根布局。

嵌套路由

Next.js 使用文献系统路由，其汉文献夹用于创建嵌套路由。每个文献夹代表一个映射到URL 段的路由段。layout.tsx您不错使用和文献为每条蹊径创建单独的 UI page.tsx。page.tsx是一个特地的 Next.js 文献，它导出一个 React 组件，它是路由可考察所必需的。在您的诳骗门径中，您依然有一个页面文献：/app/page.tsx- 这是与路由关联的主页/。要创建嵌套路由，您不错将文献夹嵌套在悉数并page.tsx在其中添加文献。举例：/app/dashboard/page.tsx与旅途关连联/dashboard。让咱们创建页面来望望它是何如责任的！

创建姿色板页面

在 /app 内创建一个名为姿色板的新文献夹。然后，在dashboard文献夹中创建一个新的 page.tsx 文献，其中包含以下实践：然后开动咱们的网站 pnpm run dev考察网站地址，就不错看到该目次下的页面啦 http://172.16.100.104/dashboard

这是在Next.js中创建不同页面的纪律:使用文献夹创建新的路由段，并在其中添加页面文献。通过为页面文献指定一个特地的称呼，Next.js允许你将UI组件、测试文献和其他关连代码与你的路由放在悉数。只须页面文献中的实践才会被公开考察。举例，/ui和/lib目次与你的路由悉数放在/app目次中。

创建姿色板布局

在 Next.js 中，您不错使用 layout.tsx文献来创建可在多个页面之间分享的UI组件。

最初咱们创建两个页面，分别为客户页面（customers）和发票页面（invoices），何况创建默许页面page.tsx旅途：app/dashboard/customers/page.tsx

exportdefaultfunctionPage() {return<p>客户页面</p>;}

旅途：app/dashboard/invoices/page.tsx

exportdefaultfunctionPage() {return<p>发票页面</p>;}

关于 dashboard 页面，您不错创建一个layout.tsx文献，并在其中界说导航栏和其他分享的 UI 组件。

最初在ui文献夹上头也创建一个dashboard旅途，何况创建导航栏组件，因为通过分旅途，咱们好像明晰的分别哪个组件来自于那里，创建导航文献 sidenav.tsx和nav-links.tsx。

sidenav.tsx

import Link from "next/link";import NavLinks from "@/app/ui/dashboard/nav-links";import AcmeLogo from "@/app/ui/acme-logo";import { HomeIcon } from "@heroicons/react/24/outline";export default function SideNav() { return ( <div className="flex h-full flex-col px-3 py-4 md:px-2"> <Link className="mb-2 flex h-20 items-end justify-start rounded-md bg-blue-600 p-4 md:h-40" href="/" > <div className="w-32 text-white md:w-40"> <AcmeLogo /> </div> </Link> <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2"> <NavLinks /> <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div> <Link href="/" className="flex h-[48px] w-full 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" > <HomeIcon className="w-6" /> <div className="hidden md:block">复返首页</div> </Link> </div> </div> );}

nav-links.tsx

'use client';import {UserGroupIcon,HomeIcon,DocumentDuplicateIcon,} from'@heroicons/react/24/outline';importLinkfrom'next/link';import { usePathname } from'next/navigation';import clsx from'clsx';// Map of links to display in the side navigation.// Depending on the size of the application, this would be stored in a database.const links = [ { name: 'Home', href: '/dashboard', icon: HomeIcon }, {name: 'Invoices',href: '/dashboard/invoices',icon: DocumentDuplicateIcon, }, { name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },];exportdefaultfunctionNavLinks() {const pathname = usePathname();return (<> {links.map((link) => { const LinkIcon = link.icon; return (<Linkkey={link.name}href={link.href}className={clsx( 'flexh-[48px] growitems-centerjustify-centergap-2rounded-mdbg-gray-50p-3text-smfont-mediumhover:bg-sky-100hover:text-blue-600md:flex-nonemd:justify-startmd:p-2md:px-3', { 'bg-sky-100text-blue-600':pathname === link.href, }, )} ><LinkIconclassName="w-6" /><pclassName="hidden md:block">{link.name}</p></Link> ); })}</> );}

按照我的纪律引入之后，nav-links.tsx会出现Cannot find module 'clsx' or its corresponding type declarations.ts(2307)在结尾上头输入pnpm install clsx，然后重启ts行状器即可，何如重启不错不雅看我的第4章实践（Next.js 零基础教程4｜2024最新更新中｜曲速引擎 Warp Drive）

皆创建完成之后咱们来剖析一下这两个文献什么根由，sidenav.tsx这个组件创建了一个反应式的侧边导航栏，包含一个logo、导航集合和一个复返首页的按钮。它在挪动建造和桌面建造上有不同的布局和浮现口头。这种贪图常见于当代的Web诳骗门径，相称是科罚面板或姿色板类型的界面。

而nav-links.tsx这个组件的主邀功能是：凭据预界说的集合数据创建导航集合，使用合适的图标和文本标签，凭据面前页面旅途高亮浮现活动集合，反应式贪图，得当不同屏幕尺寸。这种贪图常见于当代Web诳骗的侧边导航栏，相称是在科罚面板或姿色板中。它提供了一个明晰、一致的导航结构，同期保捏了细致的用户体验和视觉诱骗力。

问题：为什么页面上头要有个"use client"; ?

"use client"; 指示是Next.js13及以后版块引入的一个紧要见识，用于分离行状器组件（Server Components）和客户端组件（Client Components）。

问题：nav-links.tsx内部使用的函数相比多，皆是什么根由

const pathname = usePathname();这是一个Next.js提供的hook，用于赢允洽前页面的旅途。它在组件再行渲染时更新，允许组件凭据面前 URL 旅途作念出反应。links.map() 函数:links.map((link) => {// ... 渲染逻辑 })} 这个函数遍历 links 数组，为每个集合项创建一个 Link 组件。clsx 函数: 它接收多个参数，不错是字符串、对象或数组。在这里，它用于凭据面前旅途是否匹配集合的 href 来添加稀奇的模样类。皆创建完成之后结构是这么的

接下来咱们回到app/dashboard/layout.tsx文献夹,然后写入这个代码即可援用导航栏

importSideNavfrom"@/app/ui/dashboard/sidenav";exportdefaultfunctionLayout({ children }: { children: React.ReactNode }) {return (<divclassName="flex h-screen flex-col md:flex-row md:overflow-hidden"><divclassName="w-full flex-none md:w-64"><SideNav /></div><divclassName="grow p-6 md:overflow-y-auto md:p-12">{children}</div></div> );}

在 Next.js 中使用布局的一个刚正是，在导航时，只须页面组件会更新，而布局不会再行渲染。这称为部分渲染：

在前边章节中，将Inter字体导入了另一个布局：/app/layout.tsx。辅导一下：这称为根布局，是必需的。您添加到根布局的任何UI皆将在诳骗门径的统统页面之间分享。您不错使用根布局来修改和标签，并添加元数据（您将在后头的章节<body>中了解斟酌元数据的更多信息）。由于刚刚创建的新布局（/app/dashboard/layout.tsx）关于姿色板页面来说是独一的，因此您不需要进取面的根布局添加任何 UI。