问题标签 [dynamic-routing]

我正在做一个 Vue 项目，但我遇到了一个问题。

当我在特定路线中时，我想预渲染一些动态路线。在我的项目中，我有一个/works显示多个项目列表的路线。每个项目都有一个路由链接，它发送到他的/work/workID路由并呈现工作页面组件。由于这是一条动态路由，Vue 不会预渲染这些路由，并且每次加载时，我都会延迟 500 毫秒加载图像。

我的图片网址存储在 Vuex 中，图片上传到公共谷歌驱动器文件夹中。

我认为我应该使用类似的东西：

但是我的图像仍在加载中。希望有人知道这个问题;）

使用动态路由和查询参数时，路由器无法在客户端正常工作。我在页面中有以下结构：

我正在尝试使用 Router.push("/videos?sort=5&page=2", "/videos/recommended?page=2"). 我正在尝试导航到视频页面，但出于 CEO 目的，我需要将一些参数转换为 url 子路径。对于 href 我传递 /videos 后跟参数，因为我输入了我需要的 url 字符串。在我添加 [...userParams].js 之前它运行良好，但现在路由器无法正确获取 href。当 Router 推送时，它会转到 [...userParams].js 而不是 videos.js。可能是我做错了什么？可能有一些错误？

我一直在尝试将组件动态路由到 url。使用了 userParam() 钩子。但它不是渲染。

数据在以下名为 servicesData.js 的文件中可用

index.js 文件。

ServiceApp.js 文件。

servicesList.js 文件。

ServiceDetail 文件是。

HeaderService 文件。

我正在使用 react-redux 构建一个应用程序并且有 3 个主要问题。在一个 volenteer 组件中，我从 store 中获取 volenteers 的数据，然后通过将数据和列（作为常量导入）传递给它在表组件中显示它。

志愿者组件：

常量文件 - 包含 volenteerColumns ：

它看起来像这样：

我想要的是，当我单击查看按钮时，它将转到一条新路线：<Route path='/volenteerRoute/:id' component={VolenteerDetails} />

并将显示此特定志愿者的数据。我的问题是：

1. 现在，如果可能的话，我想从外部文件中导入 volenteer 列（出于可读性原因和短代码），这不是真正的常量......因为按钮应该指向动态路线，所以我如何通过单击更改我的路线查看按钮？我知道我写得不正确（如何使用格式化程序）-通过在外部文件中找到的那个按钮来传递志愿者 ID 的正确方法是什么？

2. 将 volenteer 的状态传递给 的正确方法是什么<Route path='/volenteerRoute/:id' component={VolenteerDetails} />，是通过这样的链接：

还是通过另一个 fetch API 调用的 redux 操作（首选）？如果是这样，我如何获取这些数据？这些是我的行动：

调用 getData 函数：

但当然第二个动作不起作用，因为我不知道如何将 ID 从视图按钮传递给该动作

3. VolenteerDetails（应该显示特定志愿者详细信息的组件）如何获取数据？是靠道具吗？

抱歉这个问题的长度，感谢您的帮助！

我正在尝试在我的 Next.js 应用程序中使用 Prismic 来实现动态路由结构。本质上，我有一个页面，mysite.com/landing-page例如，我可以在我的[uid]模板中路由到它，{ uid } = params在我的getServerSideProps函数中使用。但是，我希望允许用户通过子目录访问同一页面，例如mysite.com/sacramento-ca/landing-page. 我所做的研究似乎表明我可以在我的 Prismic 存储库中创建一个内容关系，该关系指定也可以引用该页面的位置（sacramento-ca作为此处的示例），然后在我的查询中引用这些内容，并通过到页面模板。但是，我无法弄清楚如何实现这一点。

我的pages目录结构如下：

..总体而言，这对于顶级页面来说效果很好。但是 1. 如何查询categoryingetServerSideProps以及如何命名和嵌套页面模板？我也阅读了这个问题/答案，这似乎是在正确的轨道上，但我不确定如何实现它。如果有帮助，这也是我的[uid]模板的代码。

想象以下端点：

文件系统结构将是：

现在的期望是，如果我击中：

它会加载_id.vue并且工作正常。但是，如果我击中：

它仍然加载_id.vue。_subId似乎永远不会加载。

是什么导致了这个问题？

我正在创建一个 Next.js 博客，它使用使用 KeystoneJS 创建的 API。我对如何从帖子的 slug 获取动态路线上的单个帖子感到非常困惑。

查询

这就是我认为查询应该是的方式：

这是在一个名为的文件中查询的post.service.js：

不出所料，这会导致 ApolloError，因为查询如何知道在访问 API 时要查询什么 slug posts/[slug].js？

还值得注意的是 KeystoneJS 在他们的指南中说：

单个实体查询接受必须提供 id 的 where 参数。

我如何根据访问的 slug 将帖子的 ID 传递给查询，[slug].js这是否意味着我根本无法通过 slug 进行查询？

我[slug].js正在使用getStaticPaths()并且getStaticProps()喜欢这样：

我怎样才能做到这一点？

问题

我不能通过 slug 查询 API，它必须是通过 id。通过KeystoneJS headless CMSAPI 提供数据，我的 NextJS 应该在静态生成的 Next.js 应用程序中使用这些数据。必须像这样查询 Keystone API：

所有帖子：(ALL_POSTS_QUERY)

单个帖子：(POST_QUERY)

我确实用于Apollo Client连接到 API 端点。

对单个帖子的查询必须如上所述格式化，带有一个 id 变量，这似乎是问题所在。我需要通过slug而不是 id 生成静态页面。

功能

getStaticPaths()

getStaticProps()

有关KeystoneJS 生成的 API的更多信息。

请帮忙

我对开发非常陌生，所以我对此的理解仍然是基本的。如果我误解了逻辑，请道歉。请任何人都可以帮助我解决我的功能出错的地方吗？我找不到其他人试图通过 slug 构建动态路由，而是通过 id 查询 API 以检索该帖子的数据。

更新：

1. 由于 [category_slug]-index.js 导致此错误的原因是getServerSideProps什么？
2. 我试图index.js在产品文件夹下做，它有效，意味着它可以与 [category_slug] which 一起使用getServerSideprops，对吗？

这是我的文件夹结构

当我输入 [product_slug] 时会导致错误。显示：

错误：所需参数 (category_slug) 未在 /categories/[category_slug]/product/[product_slug] 的 getStaticPaths 中作为字符串提供

这可以在 Next.js 中做嵌套路由文件夹吗？我找不到这方面的任何信息。我在下面显示我的代码。

我试图为 [category_slug] 提供硬编码值。以这种方式正确吗？我也不确定。我在文档中找不到这个。

谁能提供在 [product_slug] 动态路由中输入第一个动态路径的正确方法？

我正在寻找构建具有动态路由的静态 Next.js 单页应用程序，例如：/posts/123. 我想这样做：

• 能够在任何地方托管网站（例如 S3）
• 不需要在构建时知道路由（因此我们的 API 可以在独立于前端/无需重建前端的情况下随时更改）

据我所知，这应该适用于：

• next build && next export
• fallback: true

但是文档建议这仅适用于加载/中间状态。

我可以使用后备页面/捕获动态路由/静态生成的某种组合来获得运行时具有动态路由的静态单页应用程序吗？我可以使用 nginx 伪造路由（例如/posts/123-> /index.html）。

编辑：上面的段落似乎不可能。从文档中，当使用所需的包罗万象的路线时，例如[...post].js）：

fallback: true使用时不支持next export。