使用 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 在运行时进行查询。