Accepted answer

You may be using componentDidMount method.

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

but you need to use componentDidUpdate.

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.

You can also use state and other React features without writing a class. read more:


Important is ,that you initialise the someVal of the child first in the constructor

 public static getDerivedStateFromProps(
      ) {
        let { someVal } = nextProps;
        if (nextState.someVal !== someVal) {
          return {
            someVal: someVal
        return null;

After it will rerender on prop changes because the state changes


To make both parent and child re-render you need to path prop from parent to it's child.

   // parent using
   <Parent someProp={{someVal}} />

   // parent render:

   render() {
      const { someProp } = this.props
      <Child someProp={{someProp}} />

this will surely re-render both components, unless you stated another logic in componentShouldUpdate

in your case Router looks like a parent for Parent so you should only path :id as a prop.

Make sure Router is at the top level, right under the App

Related Query

More Query from same tag