如何使用 react-static 和 contentful API 处理导航

编程问答 2022-04-23

问题描述

我在我的应用程序中使用 react-static 和内容丰富的 API 来加载我的数据。我有一个 ebooks 数组，每个数组元素都有一个 redirectUrl 字段，该字段通向一个包含该元素的 pdf 的新页面（另一个名为 pdf 的数组的一部分）。 ebooks 数组中的每个元素都是一个包含按钮的页面，该按钮重定向到 redirectUrl，其中包含 pdf 数组中的相应元素。

if (resp.status === 200) {
      window.location.href = `/${
      eBook.fields.redirectUrl
   }`;

其中 eBook 是数组 eBooks 的一个元素。我已经像这样设置了 static.config.js 文件

let eBooks = await client.getEntries({
      content_type:"ebook",order: "-sys.createdAt",})
    .then((response) => response.items)
      .catch(console.error);
    
    let pdf = await client.getEntries({
      content_type:"pdf",})
    .then((response) => response.items)
      .catch(console.error);

在返回语句中

{
        path: "/",getData: () => ({
          eBooks,}),children: eBooks.map((eBook) => ({
          path: `/${urlBuilder(
            eBook.fields.url ? eBook.fields.url : eBook.fields.title
          )}`,template: "src/pages/embedded-finance-101",getData: () => ({
            eBook,})),},{
        path: `/${urlBuilder(
          eBook.fields.redirectUrl
        )}`,template: "src/pages/pdf-viewer",getData: () => ({
          pdf,})
      },

提交时，我被重定向到正确的 url，即 {eBook.fields.redirectUrl}，但页面是空的，而不是 pdf-viewer。我哪里出错了。

解决方法

我在 contentful 中设置内容模式的方式存在问题。在我解决这个问题后它就可以工作了。

contentfuljavascriptreact-staticreactjsreactjsreactjsreactjs