我正在 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
与我的情况无关的用法。
如果有更好的方法可以做到这一点,请随时告诉我。
确实,您不能通过链接直接将对象作为道具传递。
一种方法是将对象属性作为查询参数随链接传递。然后使用 searchParams 检索它们。但这不是一个好方法。
更好的方法是使用 generateStaticParams
在构建时生成每个页面。