Passing Item Information via Redirect

[jenn11]

Following, and customizing, this tutorial: https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/fetch-data-with-apo...

I have the id and details of the product I want to sent to the path 'edit-product-details' but I get an error:

TypeError: this.app.dispatch is not a function

I have tried passing the product information various ways and yet I cannot seem to get the redirect to work. Here is my code:

//pages/ResourceList.js

      import { Redirect } from '@shopify/app-bridge/actions';
...
 58     const app = this.context;¬
 59     const redirectToProduct = () => {¬
 60       const redirect = Redirect.create(app);¬
 61       redirect.dispatch(¬
 62         Redirect.Action.APP,¬                                                                                                                                                                                                           
 63         '/edit-product-details',¬
 64       );¬
 65     }
...
156                 <ResourceList¬
157                   items={items}¬
158                   renderItem={(item) => {¬
159                     const {id, title, product_type, tags, image} = item;¬
160                     const media = <Thumbnail size="large" source={¬                                                                                                                                                                     
161                                     image.src¬
162                                       ? image.src¬
163                                       : image¬
164                                   } alt={title} />¬
165                     return (¬
166                       <ResourceItem¬
167                         id={id}¬
168                         //url={{ pathname:'/edit-product-details'}}¬
169                         //url={"/edit-product-details", state:{foo: "bar"}}¬
170                         media={media}¬
171                         accessibilityLabel={`View details for ${title}`}¬
172                         onClick={() => {¬
173                           //this.set('item', item);¬
174                           redirectToProduct('item', item);¬
175                         }}¬
176                       >¬
177                         <h3>¬
178                           <TextStyle variation="strong">{title}</TextStyle>¬
179                         </h3>¬
180                         <Stack fill>¬
181                           <p>Id: {id}</p>¬
182                           <p>Product Type: {product_type}</p>¬
183                           <p>Tags: {tags}</p>¬
184                         </Stack>¬
185                       </ResourceItem>¬
186                     );¬
187                   }}¬
188                 />

I've tried using Link as well but it will not redirect or pass params:

<Link to={{ pathname: '/edit-product-details', item: item }}>Foobar</Link>

Guidance would be much appreciate in passing product information from the ResourceList to edit-product-details where the data is coming from a database and not store.

[jenn11 · Accepted solution]

User error; one must import Redirect and Context and define contextType in order to properly utilize these tools.

import { Redirect } from '@shopify/app-bridge/actions';¬
import { Context } from '@shopify/app-bridge-react';¬
...
static contextType = Context;