如何解决使用 gatsbyJs 的 SEO 动态页面
我正在尝试创建一个带有 SEO 的 gatsby 站点,该站点通过从查询参数中获取 id、查询我构建的 api 并使用该日期构建页面来工作,它应该对 SEO 友好。我做了一些研究,我只能找到获取数据集合并使用它们构建页面的教程,例如。 https://api.com/users
获取用户列表,然后为每个用户创建一个节点,但我要寻找的是定位特定资源,例如 https://api.com/users/2
这将获取用户并相应地构建页面提供的 api url 中的 2' 应该从应用程序用户转到的 url 中获取。无论如何可以使用 gatsby 来做到这一点?
解决方法
您必须使用 createPage api in the file gatsby-node.js。
exports.createPages = async ({ actions }) => {
createPage({
path: '/users',matchPath: '/users/:userId',component: path.resolve('./src/pages/index.js'),});
});
组件可以是特定模板(例如 path.resolve('./src/templates/UserDashboard.js'),
)或在特定位置定义的页面(例如上面定义的)。
GatsbyJS 使用 ReachRouter 进行页面路由。这意味着到达路由器中可用的所有钩子都可以在您的 Gatsby 应用程序中使用。
有关获取 URL 参数的信息,请参阅 https://reach.tech/router/api/useParams。
对于查询数据,不能使用静态查询。您将需要使用 RestAPI 或 react-apollo 在运行时进行查询。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。