NextJS 14：如何为仪表板各页面创建独立URL

核心思路是利用 NextJS App Router 的嵌套路由 + 客户端导航组件，既实现URL路由变化，又保留仪表板公共布局（侧边栏）不重载，仅更新内容区。

第一步：调整文件夹结构（符合App Router规范） #

原结构不符合路由规则，改成嵌套路由结构，让NextJS自动识别路由：

app
├╴dashboard
│ ├╴layout.tsx       # 仪表板公共布局（侧边栏+内容容器）
│ ├╴page.tsx          # 仪表板首页内容
│ ├╴component1
│ │ └╴page.tsx        # 组件1页面内容
│ └╴component2
│   └╴page.tsx        # 组件2页面内容
├╴layout.tsx          # 全局根布局
└╴page.tsx            # 网站首页（可选，可跳转至/dashboard）

第二步：编写仪表板公共布局（dashboard/layout.tsx） #

这个文件是仪表板的固定框架（侧边栏+内容区），设置为客户端组件以支持路由状态交互：

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function DashboardLayout({
  children, // 子路由页面内容会自动传入这里
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname(); // 获取当前URL路径

  // 判断当前路由是否匹配菜单项，用于高亮
  const isActive = (path: string) => pathname === `/dashboard${path}`;

  return (
    <div className="flex h-screen">
      {/* 侧边栏菜单 */}
      <aside className="w-64 bg-gray-800 text-white p-4">
        <nav>
          <Link
            href="/dashboard"
            className={`block py-2 px-4 rounded ${isActive('') ? 'bg-gray-700' : ''}`}
          >
            仪表板首页
          </Link>
          <Link
            href="/dashboard/component1"
            className={`block py-2 px-4 rounded mt-2 ${isActive('/component1') ? 'bg-gray-700' : ''}`}
          >
            组件1页面
          </Link>
          <Link
            href="/dashboard/component2"
            className={`block py-2 px-4 rounded mt-2 ${isActive('/component2') ? 'bg-gray-700' : ''}`}
          >
            组件2页面
          </Link>
        </nav>
      </aside>

      {/* 动态内容区（仅更新子页面） */}
      <main className="flex-1 p-6 overflow-auto">
        {children}
      </main>
    </div>
  );
}

第三步：编写各个子页面 #

仪表板首页（dashboard/page.tsx） #

export default function DashboardHome() {
  return <div>欢迎来到仪表板首页</div>;
}

组件1页面（dashboard/component1/page.tsx） #

import Component1 from '@/app/components/component1/Component1'; // 引入你的组件

export default function Component1Page() {
  return <Component1 />;
}

组件2页面（dashboard/component2/page.tsx） #

import Component2 from '@/app/components/component2/Component2';

export default function Component2Page() {
  return <Component2 />;
}

第四步：网站首页跳转（可选） #

如果需要从网站首页进入仪表板，修改app/page.tsx：

import Link from 'next/link';

export default function Home() {
  return (
    <div className="flex items-center justify-center h-screen">
      <Link href="/dashboard" className="px-4 py-2 bg-blue-500 text-white rounded">
        进入仪表板
      </Link>
    </div>
  );
}

关键说明 #

1. 无重载原理：使用next/link导航时，NextJS会在客户端完成路由切换，仅更新children对应的内容区，公共布局（侧边栏）完全保留，不会触发页面重载。
2. URL直接访问：嵌套路由天然支持直接访问，比如输入/dashboard/component1会自动加载仪表板布局+组件1页面。
3. 状态同步：通过usePathname获取当前路径，实现侧边栏菜单项的高亮，确保URL与页面状态一致。

内容的提问来源于stack exchange，提问作者user2030942