Next.js中URL变化时不替换整页、追加展示新内容的实现方法

你要实现的就是嵌套路由效果，Next.js 不同路由架构实现方式如下：

一、Pages Router 实现方案（你当前代码用的就是该架构） #

该架构需要手动抽离公共布局复用，步骤如下：

1. 先抽离 work 页面的公共内容为布局组件，新建 components/WorkLayout.js：

const WorkLayout = ({ children }) => {
  return (
    <div>
      <h1>This is Work Page.</h1>
      <p>Content of work page.</p>
      {/* 子路由内容会在这里渲染 */}
      {children}
    </div>
  )
}
export default WorkLayout

2. 修改原有的 pages/work/index.js（也就是你现在的 WorkPage 组件）：

import { useRouter } from "next/router";
import WorkLayout from '../../components/WorkLayout';

const WorkPage =()=> {
  const {push} = useRouter()
  const navigateHandler =()=> {
    push(`/work/wiki`)
  }

  return (
    <WorkLayout>
      <button onClick={navigateHandler}>Go to work/wiki</button>
    </WorkLayout>
  )
}
export default WorkPage

3. 新建 pages/work/wiki.js 对应子路由：

import WorkLayout from '../../components/WorkLayout';
import WorkDetail from '../../components/WorkDetail'; // 引入你自己的WorkDetail组件

const WorkWikiPage = () => {
  return (
    <WorkLayout>
      <WorkDetail />
    </WorkLayout>
  )
}
export default WorkWikiPage

二、App Router 实现方案（Next.js 13+ 推荐架构） #

该架构原生支持嵌套路由，不需要手动抽离布局到公共组件，步骤如下：

1. 调整 app 目录结构：

app/
└── work/
    ├── layout.js     // work路由组公共布局，所有/work下的子路由都会自动继承
    ├── page.js       // 对应路由 /work
    └── wiki/
        └── page.js   // 对应路由 /work/wiki

2. 编写 app/work/layout.js 放公共内容：

export default function WorkLayout({ children }) {
  return (
    <div>
      <h1>This is Work Page.</h1>
      <p>Content of work page.</p>
      {children}
    </div>
  )
}

3. 编写 app/work/page.js：

'use client'
import { useRouter } from "next/navigation";

export default function WorkPage() {
  const { push } = useRouter()
  const navigateHandler = () => {
    push(`/work/wiki`)
  }
  return <button onClick={navigateHandler}>Go to work/wiki</button>
}

4. 编写 app/work/wiki/page.js：

import WorkDetail from '../../../components/WorkDetail'

export default function WorkWikiPage() {
  return <WorkDetail />
}

两种方案最终实现效果完全符合需求：点击按钮后 URL 变为 /work/wiki，页面同时展示原 workPage 所有内容和 WorkDetail 组件内容。

内容的提问来源于stack exchange，提问作者Nyi Nyi Hmue Aung