One example is using the React Context API to pass props from the _app file to pages.
Another scenario involves refactoring a ReactJS routing, where state is passed from app.js to pages through the route definition as shown below:
<Route><Component state=state/></Route>The documentation I came across here suggests that we should avoid touching the pageProps since it is intended for statically generated props only.
Here's a specific piece of code that needs attention:
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('');
// Other functions and hooks
/* 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