从零开始NEXT.js(五)——路由组和平行路由

Arthus_wyk

于 2024-07-23 16:58:50 发布

阅读量230

点赞数 7

分类专栏： NEXT.js 文章标签：前端前端框架 javascript

本文链接：https://blog.csdn.net/Arthus_wyk/article/details/140639638

版权

NEXT.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

从零开始NEXT.s(四)——服务器组件

上一章我们介绍了服务器组件的内部逻辑，这一章我们重点来讲一下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，然后设置他是管理员时显示

效果如下：