Me gustaría, por ejemplo, usar la API React Context para pasar accesorios a páginas desde el archivo _app.

Otro caso de uso sería refactorizar un enrutamiento de ReactJS, donde el estado se pasa de app.js a las páginas a través de la definición de ruta de la siguiente manera:

<Route><Component state=state/></Route>

Encontré esta documentación pero parece que no deberíamos tocar los pageProps ya que solo para accesorios generados estáticamente.

Aquí hay una pieza concreta de código que estoy tratando de arreglar:

 const App = (Component,pageProps) => { const [mobileOpen, setMobileOpen] = React.useState(false); const [products, setProducts] = useState([]); const [cart, setCart] = useState({}); const [order, setOrder] = useState({}); const [errorMessage, setErrorMessage] = useState(''); const fetchProducts = async () => { const { data } = await commerce.products.list(); setProducts(data); }; const fetchCart = async () => { setCart(await commerce.cart.retrieve()); }; const handleAddToCart = async (productId, quantity) => { const item = await commerce.cart.add(productId, quantity); setCart(item.cart); }; const handleUpdateCartQty = async (lineItemId, quantity) => { const response = await commerce.cart.update(lineItemId, { quantity }); setCart(response.cart); }; const handleRemoveFromCart = async (lineItemId) => { const response = await commerce.cart.remove(lineItemId); setCart(response.cart); }; const handleEmptyCart = async () => { const response = await commerce.cart.empty(); setCart(response.cart); }; const refreshCart = async () => { const newCart = await commerce.cart.refresh(); setCart(newCart); }; const handleCaptureCheckout = async (checkoutTokenId, newOrder) => { try { const incomingOrder = await commerce.checkout.capture(checkoutTokenId, newOrder); setOrder(incomingOrder); refreshCart(); } catch (error) { setErrorMessage(error.data.error.message); } }; useEffect(() => { fetchProducts(); fetchCart(); }, []); const handleDrawerToggle = () => setMobileOpen(!mobileOpen); /* switch (useRouter.pathname) { case ('/shop'):return <Products products={products} onAddToCart={handleAddToCart} handleUpdateCartQty /> case ('/cart'): return<Cart cart={cart} onUpdateCartQty={handleUpdateCartQty} onRemoveFromCart={handleRemoveFromCart} onEmptyCart={handleEmptyCart} /> case ('/checkout'): return <Checkout cart={cart} order={order} onCaptureCheckout={handleCaptureCheckout} error={errorMessage} /> } */ return <Component className="App" {...pageProps} /> } export default App