Next.js中是否有类似React Router <Outlet>的路由实现方案？

DevOps 小满

2026-7-15

Next.js 中类似 React Router 的实现方案

Next.js 针对不同路由体系（App Router 和 Pages Router）提供了对应方案，替代 React Router 的 <Outlet> 实现子路由同页渲染：

App Router（Next.js 13+）

这是官方主推的新路由体系，完全支持嵌套路由的自动渲染，对应 <Outlet> 的核心逻辑是父组件/布局中的 {children} 占位符：

按照文件夹结构定义嵌套路由：比如创建 app/dashboard/page.js（父路由页面），再在 dashboard 下建 settings/page.js（子路由页面）
在父页面 dashboard/page.js 中添加 {children}，访问 /dashboard/settings 时，子页面内容会自动渲染到这个位置，和 <Outlet> 效果完全一致
全局或局部的 layout.js 文件中，{children} 同样承担类似 <Outlet> 的作用，用于渲染子路由或子布局的内容

示例代码（父页面）：

// app/dashboard/page.js
export default function Dashboard() {
  return (
    <div className="dashboard-container">
      <h2>主控制台</h2>
      {/* 子路由内容会渲染到这里，等价于React Router的<Outlet> */}
      {children}
    </div>
  );
}

Pages Router（Next.js 12及更早）

旧路由体系需要手动处理路由匹配来实现类似效果：

使用 useRouter() 钩子获取当前路径，根据路径条件渲染对应子组件
也可以结合动态路由（如 /dashboard/[slug]），通过 router.query.slug 判断要渲染的子组件

示例代码：

// pages/dashboard/index.js
import { useRouter } from 'next/router';
import Settings from './settings';
import Profile from './profile';

export default function Dashboard() {
  const { pathname } = useRouter();

  return (
    <div>
      <h1>控制台首页</h1>
      {/* 根据当前路由渲染对应子组件 */}
      {pathname === '/dashboard/settings' && <Settings />}
      {pathname === '/dashboard/profile' && <Profile />}
    </div>
  );
}