react-router the same route, different parameters, the page does not refresh

Use componentWillReceiveProps (newProps) function, when the props change, we can get the new url parameters newProps.match.params.id in the function, and then update it. as follows

componentWillReceiveProps (newProps) { 
  const ID = newProps.match.params.id; 
  // some operations 
}

If you use this method, then point to note is:

We may use the components in more than react in a need to perform component componentWillReceiveProps method may be used as sub-components that are present. That component react-router direct effect is to use componentWillReceiveProps component's parent assembly
this time to change the routing parameters are not monitored, in order to be able to monitor the need in the parent component sub-assembly passed the props, like this

<The Route path = "/ Hello /: ID" Component MyHome} = {/> 
 
Export default class MyHome the extends React.Component { 
  constructor (The props) { 
    Super (The props); 
    this.state = { 
    }; 
  } 
 
  the render () { 
    return ( 
      // REACT-Router can not automatically update the page when url parameter changes can be updated automatically when parameters are changed to url 
      // use componentWillReceiveProps () in the sub-assembly, when the props change will automatically call this function 
      // but now the url a direct effect on the parameters page (current page component), in order to allow monitoring subassembly props 
      // change all the props pass subassembly 
       <this.props the UserInfo {...} /> 
    ); 
  } 
} 

Export the extends React.Component the UserInfo {class default 
  constructor (The props) { 
    Super (The props); 
    this.state = {}; 
  }
 
  componentWillReceiveProps(newProps) {
    const id = newProps.match.params.id;
    //一些操作
  }
 
  render() {
    return (
      <div className="userinfo-container">
      </div>
    );
  }
}

.

Guess you like

Origin www.cnblogs.com/crazycode2/p/12180560.html