When (where) to read React router params for data retrieval into props?

Question

I have React route:

<Route path='/contract/:id' component={ContractForm}/>

and I would like to read the value of this id param in my ContractForm component for retrieving data from database (of course using REST API and redux-saga) according to the received id value.

I am following React Router Pass Param to Component and it provides solution:

<Route exact path="/details/:id" render={(props)=>{
    <DetailsPage id={props.match.params.id}/>
}} />

But I need to process id value some time before rendering. Where (from what event) should I read id value? I am thinking about several events but none of them is satisfying:

• I can not read id in ContractForm constructor() or componentDidMount(), because those events are fired only once, if I am navigating from the current contract entity directly to the next contract entity then my ContractForm is not recreated of remounted, so events don't happen
• I can not read id in ContractForm componentWillUpdate(nextProps, nextState), because it is not fired during mounting and creation of the component.
• I can make special method processParams for reading this.props.match.params and retrieving data from the database.

render() { const {contractId, description} = this.state; this.processParams(); return ( <div>...</div>)}

But this method (which is called upon rendering) will update the global params or local params and this will cause the another call of render, so - I should make special logic in processParams to prevent the second round of rendering. I am quite uneasy to make such logic.

So - where (when) to read parameters passed by router?

Tutorials are quite basic and does not go into details.

I am specifically interested into loading REST API data into props. I am aware (thanks to answers) about getDerivedStateFromProps https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops which is exactly the event for loading REST API data into component's state, but I seek similar mechanism (event etc.) for loading REST API data into global store props. Maybe component can not do such loading? maybe application should listen to some navigation event and upon navigation event load data into store props and then application can simply render those global data with the component view.

Maybe it is bad design to load dynamically REST API data into props during runtime? E.g. all the CRUD tutorials: http://www.thegreatcodeadventure.com/building-a-simple-crud-app-with-react-redux-part-1/ https://medium.com/@rajaraodv/a-guide-for-building-a-react-redux-crud-app-7fe0b8943d0f https://github.com/maprihoda/react-redux-crud are loading data into props during initialization of the main component of the application. My intention was that I can load list of conracts initially and then user can select (navigate to) some specific contract and my application will load this contract (extensive graph) into props upon opening of the contract form and reload different contract into props upon navigation to different contract.

Answer 1

You need to implement the componentWillReceiveProps function in your DetailsPage class component. Since the same component is re-rendered with updated params and not re-mounted when you change the route params, this is because params are passed as props to the component and on props change, React components re-render and not re-mounted. you may use this as reference https://reactjs.org/docs/state-and-lifecycle.html

https://hackernoon.com/reactjs-component-lifecycle-methods-a-deep-dive-38275d9d13c0

You may get the params by using props.params.id

Answer 2

You can read it like

this.props.match && this.props.match.params.id

you can use this.props.match where-ever u needed.
Only make sure you are calling super in constructor with props.

constructor(props){
    super(props)
}

With redirection,component is re-mounted.So,lifecycle phase also.