Tengo este tipo de componente de enrutador:
import addProduct from "../components/Products" [...] <BrowserRouter> <div className="content"> <Switch> <Route path="/products"> <Products /> </Route> <Route path="/add"> <AddProduct onSubmit={addProduct} /> <Products /> </Route> </Switch> </div> </BrowserRouter>Productos, que se ven así (solo pego las cosas más importantes):
const addProduct = async (newProduct) => { const response = await axios.post('https://fakestoreapi.com/products', newProduct); console.log(response) setProducts([...products,response.data]) } [...] inside return I have a link to form, where we can create a new product: <NavLink to="/add"> <h2>Click me to add a new product</h2> </NavLink> El problema es que antes de comenzar a hacer react-router-dom , mi componente <AddProduct /> estaba dentro de los Products y podía pasar la función addProduct a AddProduct inmediatamente, así que estaba haciendo <AddProduct onSubmit={addProduct}/> . Por el momento, no sé qué debo hacer para pasar mi función addProduct al componente <AddProduct> cuando no está dentro de Products ahora.
AddProduct se ve así si importa en este caso:
import ProductsForm from './ProductsForm' function AddProduct({onSubmit}) { return ( <ProductsForm onSubmit={onSubmit} initialValues={{title: '', price: '', category: '', image: ''}} /> ) } export default AddProduct;Parece que puede beneficiarse de un sistema de gestión estatal. Hay algunos, incluidos redux y mobx . También puede 'hacer el suyo propio' usando la API de Context incorporada de reaccionar. Esto le permite almacenar su estado en una ubicación y hacer que solo los componentes que lo necesitan se suscriban a la tienda para obtener datos o funciones para modificar esos datos.
Si esto es solo para una aplicación pequeña, puede salirse con la suya usando Contexto (¡además es una gran herramienta en su cinturón!). No es tan bueno para aplicaciones más grandes, ya que solo ha sido diseñado para administrar pequeños tipos de datos.