本文主要就 Next.js
的路由,做一个学习笔记的记录,如有勘误,欢迎指正。
Page Router
OR App Router
特性 | App Router | Pages Router |
---|---|---|
路由类型 | 以服务端为中心 | 客户端 |
服务端组件支持 | 支持 | 不支持 |
复杂性 | 更复杂 | 简单 |
性能 | 更好 | 更糟 |
灵活性 | 更好 | 更差 |
基于文件目录的声明式路由在“狭义”的角度,显然会比我们熟知的「编程式」路由更好理解的多。
编程式路由
export default [
{ title: '首页', path: '/home', component: Home }
]
声明式路由
src/
└── app
├── page.tsx
├── layout.tsx
├── template.tsx
├── loading.tsx
├── error.tsx
└── not-found.tsx
├── example
│ └── page.tsx
“文件名”即路由的即视感,各有千秋吧。
本篇博文的中心思想是:“借助「Parallel Routes」和 「Intercepting Routes 」实现路由级别的登录”,文末附 demo
,可在线预览。
(:其实我个人感觉,这个方案有些鸡肋,但是本文主打的是实战与介绍思想。
(router)
在概念上属于“Route Groups”,路由分组 的含义,更多见链接。@auth
在概念上属于“Parallel Routes”,并行路由 的含义,更多见链接。(.login)
在概念上属于“Intercepting Routes”,拦截路由 的含义,更多见链接。(.login)
本质上拦截了 login
的路由,最终的表现嵌入了 layout.tsx
:
'use client'
import type { Metadata } from 'next'
import { Modal } from "antd";
import { Inter } from 'next/font/google'
import React from "react";
import { useSelectedLayoutSegments, useRouter } from 'next/navigation'
import { useAtomValue } from 'jotai';
import { loginModalAtom } from "./store";
const inter = Inter({ subsets: ['latin'] })
function RootLayout({
children, auth
}: {
children: React.ReactNode;
auth: React.ReactNode
}) {
const loginSegments = useSelectedLayoutSegments('auth')
const router = useRouter();
const isVisible = useAtomValue(loginModalAtom);
return (
<html lang="en">
<body className={inter.className}>
<div className="next-demo-wrapper">{children}</div>
{auth}
</body>
</html>
)
}
export default RootLayout
Jotai
集成import React from 'react';
import { Provider } from 'jotai';
const APP = () => {
return (
<Provider>
<Component {...pageProps} />
</Provider>
);
}
Store
集成import { atom } from 'jotai';
export const loginModalAtom = atom(false);