启动动态路由@

您可以使用客户端文件来实现您的目标。首先，您需要在项目中创建以下结构。template.(js|ts)

app/
├─ [username]/
│  ├─ page.js
│  ├─ template.js

我们之所以使用模板，是因为它们类似于布局，因为它包装了每个子布局或页面，但与跨路由维护状态的布局不同，模板在导航时为每个子布局创建一个新实例。在文件模板中，您可以执行如下操作：

"use client";

import { useParams, useRouter } from "next/navigation";

// templates are server components by default but do not receive any
// params, henceforth we need to rely on hooks on the client side.
export default function UserTemplate({ children }) {
  const router = useRouter();  
  const { username } = useParams();

  if (!username?.startsWith("@")) {
    router.replace("/");
  }

  return <>{children}</>;
}

这只会在客户端呈现您的布局，并且您的页面、子页面和页面内的后续组件仍将是服务器组件，因为客户端组件可以将服务器组件作为子组件接收。此设置可防止对嵌套路由重复这些检查。