Next.js 13 App Router并行路由刷新时404页面未找到问题求助

1. 核对并行路由的结构与引用逻辑 #

先确认你的路由结构和父组件的渲染方式是否正确：

• 正确的项目结构示例：

  app/
    dashboard/
      layout.jsx
      page.jsx       # 仪表盘主内容
      @search/
        page.jsx     # 搜索栏内容
  

• 在dashboard/layout.jsx中，必须渲染并行路由的slot：

  export default function DashboardLayout({ children, search }) {
    return (
      <div className="dashboard-container">
        {/* 渲染搜索栏并行路由 */}
        <div className="search-bar">{search}</div>
        {/* 渲染仪表盘主内容 */}
        <main>{children}</main>
      </div>
    )
  }
  

2. 将并行路由设为可选（解决刷新404的核心） #

如果你的搜索栏无需始终显示，或者不需要把搜索栏的状态挂载到URL上，把并行路由文件夹命名为@search?（添加?后缀），让Next.js将其识别为可选并行路由：

• 修改后的项目结构：

  app/
    dashboard/
      layout.jsx
      page.jsx
      @search?/       # 可选并行路由
        page.jsx
  

可选并行路由的作用是：即便URL中没有对应的路径段，服务器也能正常渲染父页面，不会返回404。客户端导航时Next.js会自动维护并行路由的状态，刷新时则默认加载可选路由的默认内容。

3. 检查导航链接的路径正确性 #

确认侧边栏的Link组件没有指向错误路径，不要指向/dashboard/search这类不存在的路由，应该直接指向仪表盘的主路径：

import Link from 'next/link'

// 正确写法：保持主路径，并行路由状态由Next.js内部维护
<Link href="/dashboard">仪表盘</Link>

如果导航链接错误指向@search的路径，刷新时服务器找不到对应页面文件，就会触发404错误。

4. 服务端组件间数据共享的实现方式 #

针对你需要的服务端组件数据共享，可以通过以下方式实现：

• 在父layout（服务端组件）中获取共享数据，再传递给主内容和搜索栏slot：

  // dashboard/layout.jsx（服务端组件）
  async function fetchSharedData() {
    // 此处拉取服务端数据，比如用户信息、全局配置等
    const res = await fetch('https://api.example.com/shared-data', { cache: 'force-cache' })
    return res.json()
  }
  
  export default async function DashboardLayout({ children, search }) {
    const sharedData = await fetchSharedData()
    
    // 将共享数据传递给子组件
    const MainContent = React.cloneElement(children, { sharedData })
    const SearchBar = React.cloneElement(search, { sharedData })
  
    return (
      <div className="dashboard-container">
        <div className="search-bar">{SearchBar}</div>
        <main>{MainContent}</main>
      </div>
    )
  }
  

• 随后在page.jsx和@search/page.jsx中接收数据即可：

  // dashboard/page.jsx（服务端组件）
  export default function DashboardPage({ sharedData }) {
    return <div>仪表盘内容：{JSON.stringify(sharedData)}</div>
  }
  

这样既解决了刷新404的问题，也实现了服务端组件之间的数据共享。

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