我正在 NextJS 中使用 \'app\' 路由器，并且想要在动态创建博客文章页面的上下文中使用动态路由。我在弄清楚如何传递 Ob...

我正在 NextJS 中使用 \'app\' 路由器，并且想 在动态创建博客文章页面的上下文中 动态路由

我在弄清楚如何将对象传递给动态创建的页面时遇到了问题，例如 Post 具有类型的对象 {id: number, title: string, likes: number} 。据我所知，这似乎是不可能的。

最好的情况下，假设我有一条路线 /posts/[id] ，例如 /posts/1 ，我将能够 1 通过定义类型来捕获动态创建的页面内部：

interface PostPageProps {
  params: {
    id: string;
  };
}

像这样使用它：

export default async function PostPage({ params }: PostPageProps) {
    // ...
    // params.id is available to me.
}

但是，似乎不可能捕获整个自定义对象，例如 Post 动态创建的页面中的对象。

目录结构

/app
  - /components
  - /posts
    - /[id]
      - page.tsx
    - page.tsx
  - favicon.ico
  - globals.css
  - layout.tsx
  - page.tsx

./app/posts/page.tsx

"use client";

// ...

type Post = {
  id: number;
  title: string;
  likes: number;
};

export default function Page() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function fetchPosts() {
      ...
    }

    fetchPosts();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>{error}</p>;

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-3xl font-bold underline">
        {posts.map((post) => (
          <li key={post.id}>
            <Link href={`/posts/${post.id}`} className="block">
              {post.title}
            </Link>
          </li>
        ))}
      </h1>
    </main>
  );
}

./app/posts/[id]/page.tsx

type Post = {
  id: number;
  title: string;
  likes: number;
};

interface PostPageProps {
  params: {
    id: string;
  };
}

export default async function PostPage({ params }: PostPageProps) {
  const { id } = params;
  console.warn(params);
  return (
    <div>
      <h1>{id}</h1>
    </div>
  );
}

获取特定页面访问权限的一种方法是使用 中给出的 id PostPageProps 在加载数据（以 .json 中的文件 /public ）后过滤出感兴趣的特定帖子。但是，这意味着每次访问特定帖子页面时，我都必须加载整个 json 文件并针对特定帖子进行过滤。从性能角度来看，这并不好，因此我尝试在 \'parent\' 页面中一次性加载所有内容，这样我就可以动态创建每个帖子（路由）。如果您在 NextJS 中使用 App 路由器，则可以采用这种方法，请注意，这取代了 getStaticProps 与我的情况无关的用法。

如果有更好的方法可以做到这一点，请随时告诉我。