One component different props???

Question

React

Krch this situation is the Inbox component

<Switch>
...otherRoutes
Route path={'/inbox'} component={Inbox}  />
</Switch>

function Inbox() {
Link to={'/inbox/someID'}
Link to={'/inbox/someID'}
Link to={'/inbox/someID'}
<div>
Route exact path={'/inbox/:id} component={Box}
</div>

class Box extends Component {
ComponentDidMount() {
 fetchSomeData(this.props.match.params.id)
}
render(){
return (
<div>SomeData</div>
)
}
}

In Inbox, links and a route to the Box component are rendered, which, according to the id, should fetch and display data from the server, I realized that the component is mounted 1 time and when you follow the links, it just receives new props in the form of match.params.id , so maybe Someone will have some ideas how to implement this so that when you follow the links, the component fetches the data in accordance with the id. ???

Answer 1

componentDidUpdate(prevProps) {
  const id = this.props.match.params.id;
  if (id !== prevProps.match.params.id) {
    this.fetchSomeData(id);
  }
}