如何在NextJS中实现类似React<Outlet/>的嵌套路由？

完全可以实现！Next.js的两种路由体系（App Router 和 Pages Router）都能达成你在React Router中通过<Outlet>实现的嵌套路由效果，具体实现方式如下：

一、App Router（Next.js 13+ 推荐方案） #

App Router本身基于文件系统路由，但天然支持嵌套布局，效果和React Router的父路由+<Outlet>模式完全一致：

1. 搭建目录结构

app/
├── welcome/
│   ├── layout.js  # 对应你例子中的<Welcome>父组件
│   └── new-user/
│       └── page.js # 对应子路由的内容组件
└── layout.js

2. 编写父布局组件（welcome/layout.js）
   这个布局组件就相当于React Router里的父路由组件，子路由的内容会自动渲染在{children}的位置，替代了你用的<Outlet>：

export default function WelcomeLayout() {
  return (
    <section>
      <h2>Welcome Page!</h2>
      {/* 子路由内容会自动渲染在这里 */}
      {children}
    </section>
  );
}

3. 编写子路由页面（welcome/new-user/page.js）

export default function NewUserPage() {
  return <p>Welcome new user!</p>;
}

当你访问/welcome/new-user时，页面会自动用WelcomeLayout包裹NewUserPage的内容，和你React Router的示例效果一模一样。如果非要显式配置路由（不依赖文件系统），可以在布局里结合useRouter做条件渲染，但App Router更推荐遵循文件系统路由的约定。

二、Pages Router（Next.js 12及更早版本） #

Pages Router没有内置类似<Outlet>的组件，但可以通过两种方式实现嵌套路由：

方式1：自定义布局+路由判断 #

1. 页面文件结构

pages/
├── welcome.js # 父页面
└── welcome/
    └── new-user.js # 子页面组件

2. 父页面（pages/welcome.js）
   在父页面里根据当前路由判断是否渲染子组件，模拟<Outlet>的作用：

import { useRouter } from 'next/router';
import NewUser from './welcome/new-user';

export default function Welcome() {
  const router = useRouter();
  const isNewUserRoute = router.pathname === '/welcome/new-user';

  return (
    <section>
      <h2>Welcome Page!</h2>
      {/* 匹配到子路由时渲染对应组件 */}
      {isNewUserRoute && <NewUser />}
    </section>
  );
}

3. 子组件（pages/welcome/new-user.js）

export default function NewUser() {
  return <p>Welcome new user!</p>;
}

方式2：集成React Router（不推荐） #

你也可以直接在Pages Router项目里引入react-router-dom，完全按照React Router的方式配置路由，但这样会和Next.js内置的路由系统冲突，不建议在生产环境使用，仅作为临时应急方案。

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