本文主要就 Next.js 的路由，做一个学习笔记的记录，如有勘误，欢迎指正。
Index Router OR App Router
声明式路由
基于文件目录的声明式路由在“狭义”的角度，显然会比我们熟知的「编程式」路由更好理解的多。
编程式路由
export default [
{ title: '首页', path: '/home', component: Home }
]声明式路由
src/
└── app
├── index.tsx
├── layout.tsx
├── template.tsx
├── loading.tsx
├── error.tsx
└── not-found.tsx
├── example
│ └── index.tsx“文件名”即路由的即视感，各有千秋吧。
本篇博文的中心思想是：“借助「Parallel Routes」和 「Intercepting Routes 」实现路由级别的登录”，文末附 demo，可在线预览。
（：其实我个人感觉，这个方案有些鸡肋，但是本文主打的是实战与介绍思想。
工具链
- Antd 5
- Next
- Jotai
目录分布
Preview
(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拦截前
Preview
拦截后
Preview
独立登录页
Preview
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);Demo
快来扫码体验下路由拦截能力吧～
Preview