- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我想在我的 gatsby 生成的网站中创建一个使用 slug 作为参数的路由。
我有一个位于路线 /projects/<slug>
上的项目列表.
通常使用 react router 我会创建一个这样的路由:
<Route exact path='/projects/:project' component={Projects} />
看来在 gatsby 中,我必须在 ./pages
下创建一个新文件目录并创建一个新路由。我有一个名为 projects
的页面我尝试在路由参数上查找,但似乎只得到 404 页面。
// ./pages/projects.js
class SingleProject extends Component {
state = {
project: {}
}
componentDidMount(){
const project = this.props.projects.find(project => project.slug === this.props.match.params.project)
this.setState({project})
}
render() {
return (
<div className="single-project" >
</div>
)
}
}
export default SingleProject;
如何在 gatsby 中使用带参数的路由?
我刚刚遇到client only routes但我想这些路由不会是静态生成的。
我会有一个预定义的 slug 列表,所以也许有一种方法可以为每个项目 slug 创建一个页面?我想我可以在 ./pages/projects/<slug>
中手动创建一个文件我有foreach项目?
最佳答案
您需要使用 Gatsby 在 gatsby-node.js
的 createPages
中为您提供的 createPage
方法应用程序接口(interface)。有 a guide在 Gatsby 文档中显示您可以实现这一点。 Here's an even simpler example来自类似的问题。
export const createPages = ({ actions }) => {
const { createPage } = actions;
createPage({
path: '/projects/hello-world',
component: SingleProject,
// Send additional data to page component
context: {
id: 'hello-world',
},
});
};
关于javascript - 如何在 gatsbyjs 中创建带参数的路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51988998/
注意:感谢@Ferran Buireu 的建议。由于对 docker 非常陌生,并且将网络世界更改为系统和编程,我很肯定会得到负票。 部署gatsbyjs后,发现socketio错误“net::ERR
我是 gatsbyjs 的新手。遵循所有教程并开始使用 Saasland 模板使用 gatsbyjs 创建网站。我已经用 npm 安装了 bootstrap。该模板具有以下 vendor 特定的依赖项
我正在尝试在 Visual Studio 代码中调试我的 gatsbyjs 代码。我按照文档并尝试了稍微不同的方法,例如 https://github.com/Microsoft/vscode-rec
有人可以谈谈或将我链接到包发布策略背后的理由吗?我想知道为什么有这么多“仅版本提升”的版本,它使变更日志过于冗长并且 => 难以及时升级软件包。它还使版本差异变得更加困难。 例如https://git
我正在用 gatsbyjs 构建一个站点。就seo而言,我认为“onClick”是不可抓取的。所以也许有人可以帮助我。 我有这个: render={data => (
我的问题:我试图将 Gatsby 与 headless WordPress 集成并成功地做到了。我从 WordPress 动态制作了多个菜单,并通过 GraphQL 调用这些菜单。每件事似乎都运行良好
我如何为 Gatsby 创建一个将在客户端加载而不是在构建时加载的组件? 我创建了这个,它使用 gatsby develop 呈现,但不使用呈现的服务器端呈现 import React from 'r
我想要这样的路线:/blog/:blogId/:slug 我在我的 gatsby-node.js 中试过了 - exports.onCreatePage = async ({ page, action
我无法理解如何在 GatsbyJS 中为 GraphQL 查询编写过滤器。 这有效: filter: { contentType: { in: ["post", "page"] } 我基本上需要相反的
我正在尝试使用 Gatsby JS 和 Material UI 创建一个网站。存储网站内容的首选方式是什么。该网站将只是一个小型企业的宣传网站。 我是否只保留组件中的文本。或者我需要将它保存在单独的文
我在 GatsbyJS 中使用单页模板,菜单滚动到同一页面的不同部分(#home、#about、#portfolio 等)。有没有办法在链接上设置事件类名,突出显示用户所在的链接? 最佳答案 Link
因此,我在 Netlify 上托管了一个网站。我遵循了他们网站上的文档(关于表单),部署后表单的名称显示在我的 Netlify dash 上,但没有任何提交通过。 我可以帮忙吗? 这是我的 Conta
我希望托管一个 gatsbyjs 博客,该博客从 Contentful 中获取数据,类似于以下示例。 https://github.com/gatsbyjs/gatsby/tree/master/ex
我的目标是从本地插件创建页面。我写了一个名为 my-custom-plugin 的自定义插件。我还安装了 gatsby-plugin-page-creator 插件,以在默认 pages 目录之外自动
我正在使用 GatsbyJS,并且我正在尝试根据 URL 的路由呈现不同的 header。 示例: mydomain.com/ => 应呈现 HeaderLanding mydomain.com/bl
我正在使用 gatsby-plugin-styled-components 来设置下面元素的样式。 import React from 'react'; import styled from 'sty
我是 GatsbyJS 和 ReactJS 的新手,在构建项目时遇到问题。问题是每当我在其中构建带有 AOS 的项目时,它都会显示错误窗口未定义。当我在开发模式下运行时完全没问题。 这是我的代码: 我
我想在我的 gatsby 生成的网站中创建一个使用 slug 作为参数的路由。 我有一个位于路线 /projects/ 上的项目列表. 通常使用 react router 我会创建一个这样的路由:
我将 Strapi 用作 Headless CMS,并使用 Gatsby + Graphql 构建我的前端。我有一个“ block 渲染器”组件,用于渲染 strapi 中的任何动态区域。 impor
我处于一个有点不幸的位置,几年前某人的设计选择现在正在影响我重建网站。基本上,早在网站最初创建时,设计者就插入所有 URL 完全显式地使用 .html 扩展名(例如 website.com/index
我是一名优秀的程序员,十分优秀!