3 minPersonal blog

Next.js Routing

本文主要就 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，可在线预览。

（：其实我个人感觉，这个方案有些鸡肋，但是本文主打的是实战与介绍思想。

工具链

目录分布

(.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);

Demo

快来扫码体验下路由拦截能力吧～