上一章我们介绍了服务器组件的内部逻辑，这一章我们重点来讲一下NEXT,js中的页面路由。
路由组
在我们的app文件夹下，我们可以添加一个又一个文件夹去建立我们的页面路由，当页面过多时找起来就会很复杂，用路由组的形式可以很便捷的收纳我们的路由页面。
假设我们的项目结构如下：
/app
/about
page.tsx
/perference
page.tsx
/product
page.tsx
page.tsx
globals.css在app下创建文件夹(userprofile)，把about，perference拖入(userprofile)中
我们再访问 http://localhost:3000/about 和 http://localhost:3000/peerference仍然可以访问，没有增加我们路由的长度。
平行路由
平行路由可以让我们有条件的渲染页面，例如有些内容我只想管理员可以查看，我们可以这样设置：
我们新建一个文件夹名为@profile,在其中添加一个page.tsx
export default function profile(){
return(
<div>
<h1>admin profile</h1>
</div>
)
}在layout文件下修改代码
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Link from "next/link";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
profile
}: Readonly<{
children: React.ReactNode;
profile:React.ReactNode;
}>) {
const isAdmin=true
return (
<html lang="en">
<body className={inter.className}>
<nav>
<ul className="flex gap-2 justify-between px-4 bg-blue-700">
<li>
<Link href={'/'}>Home</Link>
</li>
<Link href={'/about'}>About</Link>
</ul>
</nav>
{children}
{isAdmin && profile}
</body>
</html>
);
}
在layout中我们添加了刚刚新建的profile，然后设置他是管理员时显示
效果如下：