Next.js / React单页应用需要每个条目的url

Question

我在Next JS + React JS + Tailwind中构建了一个单页应用程序，我从firebase加载了许多项目。

我使用Firebase的docRef作为应用程序中的ID。现在我希望用户能够从URL引用一个项目，并与他人分享。我该如何实现呢?

我已经研究过Next.js路由/动态路由和React路由器，但是因为这是我第一次使用React和Next.js，我不知道从哪里开始。非常感谢任何帮助。谢谢!

Answer 1

如果我理解正确:你有一个概述页和详细信息页。在路由术语中，这看起来像:/overview和/overview/${ID}

你应该看看https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation。更详细地:

// pages/posts/[id].js
function Post({ post }) {
// Render post...
}
// This function gets called at build time
export async function getStaticPaths() {
// Call an external API endpoint to get posts
const res = await fetch('https://.../posts')
const posts = await res.json()
// Get the paths we want to pre-render based on posts
const paths = posts.map((post) => ({
params: { id: post.id },
}))
// We'll pre-render only these paths at build time.
// { fallback: false } means other routes should 404.
return { paths, fallback: false }
}
// This also gets called at build time
export async function getStaticProps({ params }) {
// params contains the post `id`.
// If the route is like /posts/1, then params.id is 1
const res = await fetch(`https://.../posts/${params.id}`)
const post = await res.json()
// Pass post data to the page via props
return { props: { post } }
}
export default Post

在getStaticPaths中，定义可用的动态路径。js将生成这些页面。在getStaticProps中，传入从getStaticPaths返回的对象。在这个函数的返回中，传递构建详细页面所需的所有信息/道具。