I try to send a data called favProduct to Favourites component. When I send the data, I get undefined. How can I send a data when I use react route?
const [favProduct, setFavProduct] = useState([1,2,3,4,5]);
return (
<Router>
<div className="App">
<Header />
<Switch>
<Route path="/" exact component={Home}/>
<Route path="/men" component={Men} />
<Route path="/women" component={Women} />
<Route path="/kids" component={Kids} />
<Route path="/productBuy" component={ProductBuy} />
<Route path="/favourites" component={Favourites} />
<Route path="/cart" component={Cart} />
<Route path="/checkout" component={Checkout} />
<Route path="/addproduct" component={AddProduct} />
</Switch>
<Footer />
</div>
</Router>
);
}
If you want, or need, to send additional props to routed components, use the Route's render prop to inject the props and forward the route props.
Example:
<Route
path="/favourites"
render={props => <Favourites {...props} favProduct={favProduct} />}
/>
Access all the route props as done previously, i.e. props.location, props.history, etc... and access the new prop that was passed, i.e. props.favProduct.