Next.js App Router并行路由问题：/user/[id]未加载@users页面

问题核心：访问/user/[id]时，该路由层级未关联@users并行路由，导致user/layout.tsx的users prop无内容，因此用户列表无法渲染。

方法一：使用持久化并行路由（推荐） #

持久化并行路由允许父级的并行槽在子路由中保持渲染，只需给并行路由目录名添加?后缀：

1. 将user/@users目录重命名为user/@users?
2. 保持user/layout.tsx代码不变，此时访问/user/[id]时，users prop会自动加载@users?/page.tsx的内容，实现用户列表与指定用户信息的同时显示。

方法二：在子路由中复用并行路由组件 #

若不想使用持久化路由，可在[id]目录下创建对应并行路由，复用原@users页面组件：

1. 在user/[id]/下创建@users目录，新建page.tsx文件：

// user/[id]/@users/page.tsx
import UsersPage from '../../@users/page';
export default UsersPage;

2. 无需修改user/layout.tsx，访问/user/[id]时，users prop会加载该复用组件的内容。

额外优化：布局组件类型修正 #

App Router中无需使用NextPage类型（该类型属于Pages Router），建议修正为标准React组件类型：

import React from 'react';

interface Props {
  children: React.ReactNode;
  users: React.ReactNode;
}

const UserLayout: React.FC<Props> = ({ children, users }) => {
  return (
    <div className='flex flex-row items-center w-screen h-screen'>
      <div className='font-normal text-4xl text-slate-500 basis-60 flex-shrink text-center'>
        Users
      </div>
      <div className='flex-grow'>{users}</div>
      <div className='flex-grow'>{children}</div>
    </div>
  );
};

export default UserLayout;

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