reactjs - 使用 Gatsby 处理 URL 参数

Question

我正在使用 React & Gatsby 创建一个网站，并且我已经按照我想要的方式布置了所有内容，我只是在理解如何使用 URL 路由参数来更改显示的内容时遇到了一些问题。

例如，假设我有一个页面 categories.js 监听 http://website.com/categories 但我希望能够动态处理任何 URL 参数，例如:
http://website.com/categories/animals
当像这样使用 gatsby-link 时: <Link to="/categories/animals" /> 它希望我在类别文件夹中创建一个名为 animals.js 的文件。相反，我希望 category.js 能够处理此页面的呈现并根据 URL 参数中传递的类别选择适当的内容。

除了显示的项目之外，该页面在所有类别中都完全相同，因此每个类别都拥有自己的静态页面是没有意义的。

Answer 1

当你说:

Other than the items displayed, this page is exactly the same through all categories, so it doesn't make sense for every category to have it's own static page.

事实上，这正是我发现 GatsbyJS 如此有用的地方，因为 它是一个静态站点生成器 。

这意味着您可以为 Gatsby 提供一个 template 组件，该组件将对您的所有类别具有相同的布局，然后 Gatsby 将在构建时为您 获取数据并创建静态页面 。

Gatsby is not limited to making pages from files like many static site generators. Gatsby lets you use GraphQL to query your data and map the data to pages—all at build time. (from Gatsby official tutorial)

这个想法是这样的:

/gatsby-node.js 中的

const path = require(`path`); // you will need it later to point at your template component

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators;

  // we use a Promise to make sure the data are loaded
  // before attempting to create the pages with them
  return new Promise((resolve, reject) => {
    // fetch your data here, generally with graphQL.
    // for example, let say you use your data from Contentful using its associated source plugin
    graphql(`
      {
        allContentfulCategories {
          edges {
            node {
              id
              name
              description
              # etc...
            }
          }
        }
      }
    `).then(result => {
      // first check if there is no errors
      if (result.errors) {
        // reject Promise if error
        reject(result.errors);
      }

      // if no errors, you can map into the data and create your static pages
      result.data.allContentfulCategories.edges.forEach(({ node }) => {
        // create page according to the fetched data
        createPage({
          path: `/categories/${node.name}`, // your url -> /categories/animals
          component: path.resolve('./src/templates/categories.js'), // your template component
          context: {
            // optional,
            // data here will be passed as props to the component `this.props.pathContext`,
            // as well as to the graphql query as graphql arguments.
            id: node.id,
          },
        });
      });

      resolve();
    });
  });
};

然后您可以简单地获取模板组件上的数据

/src/templates/categories.js 中的

import React from "react";

export default ({ data: { contentfulCategories: category } }) => {
  return (
    <div>
      <h1>{category.name}</h1>
      <div>{category.description}</div>
    </div>
  );
};

// we can query the needed category according to the id passed in the
// context property of createPage() in gatsby-node.js
export const query = graphql`
  query CategoryQuery($id: String!) {
    contentfulCategories(id: { eq: $id }) {
      name
      description
    }
  }
`;

如果你坚持动态渲染你的 categories 页面，你可以举一个类似于你的 this question 的例子，但请注意，如果页面的 props 在 React 的 componentWillReceiveProps 生命周期方法中发生变化，你将不得不手动处理重新渲染 类组件。

但我真的不认为这是一个可靠的解决方案。