Send prop with react route

user_16804429 0
Viewed 156

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>
  );
}
use-state react-router reactjs javascript
2 Answers

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.

user_86908570

If using react-router v6+, in your route, try this:

<Route path="/favourites" element={<Favourites favProduct={favProduct} />} />
user_155346100
Related