1

Hello in react router dom v5 i can get params inside redux. Sample code is below:

1- passing parameter

<Route path="/saveproduct/:productId" component={AddOrUpdateProduct} />

2- get params inside redux. I can get the productId inside ownProps

function mapStateToProps(state, ownProps) {...

But when i call route in v6 i cant get the productId inside ownProps

Ertuğrul Karababa
  • 43
  • 5

2 Answers2

0

First, in react-router-dom v6 you should pass component to Route like an element. See docs.

<Route path="/saveproduct/:productId" element={ <AddOrUpdateProduct /> } />

Second,

react-router-dom v6 Route components rendered via the element prop don't receive route props

See question. Redux is not needed here. Just use params react hook

const { productId } = useParams();
kupp
  • 1
  • 1
  • But i need to get data from api before and then return them into page ? – Ertuğrul Karababa Dec 18 '21 at 12:56
  • If at the time of loading this component there is no necessary data in the Redux store, it must be requested from the API. Keep using Redux for storing API data, but do not store the URL params. – kupp Dec 18 '21 at 14:02
  • Ok but when i should call api? In use effect? In return i am passing the params to another component. – Ertuğrul Karababa Dec 18 '21 at 18:27
  • Ya, best practice is useEffect() without deps. https://stackoverflow.com/questions/53219113/where-can-i-make-api-call-with-hooks-in-react – kupp Dec 18 '21 at 19:29
0

Im new at react and it take my one day. But finally i found the solution. I am not sure this is the best practice but it make sense for me now. Check link for solution.

https://youtu.be/qdCHEUaFhBk Also thanks @kupp

Ertuğrul Karababa
  • 43
  • 5