How to handle navigation using react-static and contentful API

Question

I'm using react-static in my application and contentful API to load my data. I have an ebooks array with each array element having a redirectUrl field which leads to a new page (part of another array called pdf) containing the pdf for that element. Each element from ebooks array is a page containing a button which redirects to the redirectUrl containing the corresponding element from the pdf array.

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

Where eBook is an element of array eBooks. I've set up the static.config.js file like this

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",
      order: "-sys.createdAt",
    })
    .then((response) => response.items)
      .catch(console.error);

And in the return statement

{
        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,
        })
      },

On submit I'm being redirected to the correct url i.e {eBook.fields.redirectUrl} but the page is empty instead of being the pdf-viewer. Where am I going wrong.

Answer 1

There was an issue with the way I set up the content modal in contentful. It's working after I fixed that.