大数据

next js Routing 学习笔记 02

Posted by

特殊页面：loading.tsx

这个文件帮助我们创建加载状态，让用户在等待页面内容加载时看到

在加载页面内容过程中，布局中其他组件仍然可以使用，比如导航菜单或者侧边栏功能，即使主内容尚未准备好。

error.tsx 异常展示页面

"use client";

import { useRouter } from "next/navigation";
import { startTransition } from "react";
export default function ErrorBoundary({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  const router = useRouter();
  const reload = () => {
    startTransition(() => {
      router.refresh();
      reset();
    });
  };
  return (
    <div>
      {error.message}{" "}
      <button onClick={() => startTransition(reload)}>Try again</button>
    </div>
  );
}

渲染关系

并发路由

在同一个布局内同时渲染多个页面

并行路由在next js中使用定义插槽的形式

创建一个插槽：@folder 的形式创建文件夹名称

每个定义的插槽都会自动成为一个对应的layout.tsx文件的属性

layout中使用插槽

export default function ComplexDashboardLayout({
  children,
  users,
  revenue,
  notifications
}: {
  children: React.ReactNode;
  users: React.ReactNode;
  revenue: React.ReactNode;
  notifications: React.ReactNode;
}) {
  return (
    <div>
      <div>{children}</div>
      <div style={{ display: "flex" }}>
        <div style={{ display: "flex", flexDirection: "column" }}>
          <div>{users}</div>
          <div>{revenue}</div>
        </div>
        <div style={{ display: "flex", flex: 1 }}>{notifications}</div>
      </div>
    </div>
  )
}

children是一个隐式插槽 不需要定义 传入page.tsx内容

每个插槽都可以处理自己的加载和错误状态

用户可以在默认视图和已存档视图之间切换以查看比较旧的通知

import { Card } from "@/components/card";
import Link from "next/link";

export default function Notifications() {
  return (
    <Card>
      <div>Notifications</div>
      <div>
        <Link href="/complex-dashboard/archived">Archived</Link>
      </div>
    </Card>
  );
}

这里archived是常规文件夹名称，使用/complex-dashboard/archived可以访问到

import { Card } from "@/components/card";
import Link from "next/link";

export default function ArchivedNotifications() {
  return (
    <Card>
      <div>Archived notifications</div>
      <div>
        <Link href="/complex-dashboard">Default</Link>
      </div>
    </Card>
  );
}

在两个页面切换 像children一样加载插槽的内容

默认情况下插槽内渲染的内容与当前URL匹配，当通过导航（点击链接跳转）时，没有匹配的插槽时，nextjs会显式之前不匹配的插槽中的内容。

也就是，在默认和已归档的通知之间切换时，其他三个插槽（children、user、revenue）保持不变，并不受URL路径切换的影响。

但是如果刷新页面 没有匹配到就会404错误，因为没有匹配对应的URL的插槽也没设置default.tsx文件，每一个插槽都需要设置一个default.tsx

条件路由

export default function ComplexDashboardLayout({
  children,
  users,
  revenue,
  notifications,
  login,
}: {
  children: React.ReactNode;
  users: React.ReactNode;
  revenue: React.ReactNode;
  notifications: React.ReactNode;
  login: React.ReactNode;
}) {
  const isLoggedIn = true;
  return isLoggedIn ? (
    <div>
      <div>{children}</div>
      <div style={{ display: "flex" }}>
        <div style={{ display: "flex", flexDirection: "column" }}>
          <div>{users}</div>
          <div>{revenue}</div>
        </div>
        <div style={{ display: "flex", flex: 1 }}>{notifications}</div>
      </div>
    </div>
  ) : 
    // 条件路由 显式登陆
    login
  );
}

拦截路由

从当前路径跳转目标路径，如要拦截同名路径需要按照以下规则在当前路径创建文件夹

  • 拦截同级路径：(.) + 文件夹名称
  • 拦截上一级路径：(..) + 文件夹名称
  • 拦截上两级路径：(..)(..) + 文件夹名称
  • 拦截根路径：(...) + 文件夹名称

下一篇
next js Routing 学习笔记 03
上一篇 next js Routing 学习笔记 01