面试题：Next.js 中嵌套路由如何在多级菜单场景下实现基础结构搭建

Question

请描述在 Next.js 项目中，使用嵌套路由实现一个简单三级菜单场景时，目录结构应该如何规划以及 _app.js 和页面组件中基本的路由配置步骤。

Answer 1

目录结构规划

1. pages 目录：这是 Next.js 项目存放页面文件的主目录。
   • 创建 pages/menu 目录，用于存放一级菜单相关页面。
   • 在 pages/menu 目录下，为每个一级菜单创建一个子目录，比如 pages/menu/menu1，pages/menu/menu2 等，这些目录对应二级菜单。
   • 在每个二级菜单目录下，再为每个三级菜单创建页面文件，例如 pages/menu/menu1/submenu1.js，pages/menu/menu1/submenu2.js 等。

_app.js 中的路由配置步骤

1. 在 _app.js 文件中，导入 Router 相关模块（如果需要对路由进行全局处理）。Next.js 的 _app.js 负责应用的全局布局和状态管理等。

import { useEffect } from'react';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
    const router = useRouter();

    useEffect(() => {
        // 可以在这里监听路由变化，进行一些全局操作，比如记录页面访问等
        const handleRouteChange = (url) => {
            console.log(`路由变化到: ${url}`);
        };
        router.events.on('routeChangeComplete', handleRouteChange);
        return () => {
            router.events.off('routeChangeComplete', handleRouteChange);
        };
    }, [router]);

    return <Component {...pageProps} />;
}

export default MyApp;

页面组件中的路由配置步骤

1. 一级菜单页面：在 pages/menu 目录下的页面文件中（假设为 pages/menu/index.js），使用 Link 组件来创建到二级菜单的链接。

import Link from 'next/link';

const Menu = () => {
    return (
        <div>
            <Link href="/menu/menu1">
                <a>菜单1</a>
            </Link>
            <Link href="/menu/menu2">
                <a>菜单2</a>
            </Link>
        </div>
    );
};

export default Menu;

2. 二级菜单页面：在二级菜单目录下的页面文件中（例如 pages/menu/menu1/index.js），同样使用 Link 组件创建到三级菜单的链接。

import Link from 'next/link';

const SubMenu = () => {
    return (
        <div>
            <Link href="/menu/menu1/submenu1">
                <a>子菜单1</a>
            </Link>
            <Link href="/menu/menu1/submenu2">
                <a>子菜单2</a>
            </Link>
        </div>
    );
};

export default SubMenu;

3. 三级菜单页面：三级菜单页面（如 pages/menu/menu1/submenu1.js）则是具体展示内容的页面，无需再进行路由链接创建（除非还有更深层次的嵌套需求）。

const SubSubMenu = () => {
    return (
        <div>
            <h1>三级菜单1的内容</h1>
        </div>
    );
};

export default SubSubMenu;