Don't get route parameters after navigating through reactive router-4
after going through this.props.history.push
I do not receive route params
in component
.
I have the only one component
that works on both routes.
So going from one route to another results in component update
, and I don't get route params
in it.
if the page is refreshed i get route params
this.props.history.push(`/pois/select/${lastAction.payload.poiID}`)
my routing component.
class Routes extends React.Component {
render() {
return <div>
<Switch >
<Route exact path="/pois/" component={ POIS } mode='view' />
<Route exact path="/pois/select/:poiID" component={ POIS } mode='select' />
<Route exact path="/pois/create" component={ POIS } mode='create'/>
<Route exact path="/pois/update/:poiID" component={ POIS } mode='update'/>
</Switch>
</div>;
}
source to share
Use a combination componentWillReceiveProps
and componentDidMount
lifecycle method.
When the first time component makes an api call inside the method componentDidMount
and retrieves the data like:
componentDidMount(){
// ajax call to fetch data then do setState to store in state variable
}
Next time when any thing changes in props the method call componentWillReceiveProps
will be called, make the api call like:
componentWillReceiveProps(nextProps){
console.log(nextProps.params, this.props.params);
// nextProps.params will print the new params values
// this.props.params will print the old params values
// ajax call to fetch data then do setState to store in state variable
}
source to share