问题标签 [dynamic-routing]

当我在 my中运行nuxt generate时，我的动态创建的路由不接受它们的有效负载，它们是这样的：target: "static"nuxt.config.js

在nuxt generate上面的 console.log 中，每个动态路由都会被命中，所以我知道它正在接收正确的有效负载。

在nuxt generate我dist的文件夹对每个动态路由都有一个子文件夹后，但是index.htmlfor each 里面只有几行，当我在浏览器上访问每个动态路由的页面时，不会出现特定于动态路由的内容（我的layout组件中的导航栏很好）。

应用程序中的导航工作正常，所以如果我转到另一个页面并进入我的动态路由内容的页面，那么会出现，所以asyncData工作，接受有效负载是麻烦。

如果没有target: "static"按预期工作，index.htmlfor each in 中dist有很多内容，并且页面在访问时会加载所需的内容，尽管head()没有生成 business.vue 中的方法（请参阅我的问题here）。

谁能指出我错过了什么/做错了什么？

我目前在“src”目录中有一个像这样的文件结构：

我想保留这个文件结构并使用动态路由。例如，“PageToRenderOnDynamicRoute.js”的路由将类似于“/page/pageType/:pageId/otherSlug/:slug”。

我知道我可以使用 Next.js 提供的动态路由，但我不想使用以下必要的文件结构：

我曾尝试使用next-routes，但遇到了很多问题，包括：使用 getStaticProps 或 getServerSideProps 时返回 404，刷新页面时返回 404，手动输入 url 时返回 404。

有谁知道我可以保留现有文件结构并使用动态路由的方法？我对任何选择持开放态度，包括如果您知道上述问题的有效解决方案，则继续尝试下一条路线。我感谢您的帮助！

我将我的第一个 Gatsby 项目部署到 github 页面：
repo：https
://github.com/michal-kurz/stfuandclick gh-pages：https ://michal-kurz.github.io/stfuandclick/app/ （从gh-pages分支生成）

它有一个页面，src/pages/app.tsx使用Reach Router进行动态路由。

注意：BASE_URL等于/stfuandclick生产环境版本和''其他环境

在开发模式下gatsby develop一切正常（/team/:teamName/app//app/

打开/team/:teamName链接直接导致 404（除非之前通过 访问它进行缓存/app/，但随后 ctrl + f5 再次导致 404）。

部署应用程序后，似乎似乎gatsby.node.js无法正常工作。我最初怀疑它根本不起作用，但显然情况并非如此，因为注释所有代码会进一步破坏应用程序（团队页面在通过链接访问时突然中断/app）。

我尝试在生产版本中为路径添加前缀，如下gatsby-node.js所示：BASE_URL

并且还分别为两条路径中的每一条添加前缀gatsby-node.js，但没有运气。

pathPrefix我确实有gatsby-config.json：（这里有完整的配置）

我使用以下纱线脚本进行部署：（此处为完整的 package.json）

我可以做些什么来使我的路由工作？

我有一个像这样的 vue-router 动态路由，

每次有人导航到这条路线时，都会使用 CustomReportWrapper.vue 进行渲染。但是它们每个导航都使用相同的 Component 实例，如此处的vue-router 文档中所述。

我想覆盖这种行为，以便每个新导航都创建一个新的 Vue 组件实例。如果不直接支持此功能，则任何解决方法也将有所帮助。

是否可以构建包含预定义格式的动态部分的路线，/[name]-id[id]例如，有路线/bob-id303或/mary-id205？

我尝试的是创建一个文件[name]-id[id].js。在getInitialProps我 console.log里面ctx它包含

另一方面，调用文件[[name]]-id[id]].js给出

我想直接获取nameand id，然后通过初始道具将它们传递给页面。我知道我可以解析asPath，但还有其他方法吗？

我目前正在更新一个 React 项目以使用 Next.js。我偶然发现了动态路由的一个小问题，到目前为止我在网上找不到任何解决方案。

我有许多使用相同组件并根据 slug 显示不同内容的信息页面。使用react-router这些可以指定如下：

到目前为止，对于 Next.js，我认为我会使用如下所示的动态路由。唯一的问题是 URL 现在将具有/infoPage/___- /infoPage/about-us, /infoPage/terms.

作为解决方案，可以使用as正确的 URL 更新链接：

虽然这在单击链接时有效，但刷新页面最终会出现 404 页面 - 因为 Next.js 不知道任何页面为/about-us.

可能的解决方案

• 使用动态路由/pages/[infoPages].js。不太确定这是否是理想的解决方案，因为它很可能会像回退到任何其他页面一样。

• 我想我可以在每个页面中单独声明/pages并在每个页面中导入相同的组件，但它会稍微重复。

• 保留/infoPage/[infoPage].js路由，将来自客户端/服务器的重定向添加到正确的 URL

我可能想多了，第二种解决方案不会是世界末日，但我仍然想知道是否有更好的解决方案。

提前致谢 ：）

我正在尝试在 react js 中创建动态路由。我想要的是每当用户在我的路由中传递一个值时，它应该从 api 检查该值是否存在，它应该显示一个特定的页面。我正在发送一个发布请求并取回一些数据，但我无法将它与我的路线链接起来。下面是我的代码。我也想知道如何验证用户输入的值是否存在于我的 api 中。

我的组件

我的路线

在 ref 中，我想传递我的数据，即我的 ref，该数据将针对 api 进行检查。

只要 api 的响应为真，我就会尝试显示组件。但是，如果我尝试在 iam 发送 api 请求的 axios 中执行此操作，则它不起作用，并且如果我删除下面的返回，它会给我一个错误，即没有可渲染的内容。

我的代码

1. all-trades.component.ts

2. all-trades.component.html

在这里，你们可以在我的网页上看到有几张名为“RICE”、“WHEAT”、“BARLY”的卡片我只想通过单击 RICE 我的代码导航到另一个组件页面并显示名称我的对象数组中的子类别名称。同样，它也适用于“WHEAT”和“BARLEY” 示例：当我点击 Wheat Card 时，它应该导航到不同的页面并显示 Wheat 部分的子类别的名称。

我想从对象数组中获取和显示数据。我已经创建了参数化路线。

1.app-routing.module.ts

2.作物.ts

3.作物数据.ts

这是我的对象数组，我想访问子类别并在网页上显示名称。例如：当用户点击大米时，它应该得到类似'Basmati'，'Ammamore'的结果， 或者 当用户点击小麦时，它应该得到类似'Durum'，'Emmer'的结果 或者 当用户点击大麦然后它的应该得到像“Hulless Barley”、“Barley Flakes”这样的结果

4.1 crop.service.ts // 首先我尝试了这个逻辑

4.2 crop.service.ts // 然后我试了这个逻辑

我在这两种情况下都失败了。

5.1 all-trades.components.ts

// 首先尝试使用函数

5.1 all-trades-component.html

6. 作物组件.ts

7.crop-component.html

这是我的 eniter 代码，我不知道哪里出错了，请帮助从对象数组中获取数据。[![在此处输入图像描述][1]][1] 这是我的 all-trades.component.html 输出

1. 当我单击 Rice 时，我将其作为输出（Url get change ）

[![在此处输入图像描述][2]][2]

2. 当我点击小麦时，我得到了这个

[![在此处输入图像描述][3]][3]

等等....我只想显示子类别数组的名称。请给我解决方案。[1] ： https ://i.stack.imgur.com/kxdyj.png [ 2 ]： https ://i.stack.imgur.com/OOAtc.png [3]：https://i.stack。 imgur.com/PVcfT.png