title: reset component's internal state on route change
body: <p><strong>I am using react-router-v4 along with react 16.</strong></p>
  
  <p>I want to reset the component's internal state when the user go to a different route or comes back to the same route . Route change should destroy the internal state of a component but it doesn't . And I can't even find a way to notify the component when the route changes as it's a nested component not a direct render of a <code>Route</code> component. Please help.</p>
  
  <p>Here's the code or <a href="https://codepen.io/ruhul235225/pen/ddoBgM?editors=0010" rel="noreferrer">live codepen example</a> -- </p>
  
  <pre><code>const initialProductNames = {
      names: [
          { "web applications": 1 },
          { "user interfaces": 0 },
          { "landing pages": 0 },
          { "corporate websites": 0 }
      ]
  };
  
  export class ProductNames extends React.Component {
  
  state = {
      ...initialProductNames
  };
  
  animProductNames = () =&gt; {
      const newArray = [...this.state.names];
      let key = Object.keys(newArray[this.count])[0];
      newArray[this.count][key] = 0;
  
      setTimeout(() =&gt; {
          let count = this.count + 1;
  
          if (this.count + 1 === this.state.names.length) {
              this.count = 0;
              count = 0;
          } else {
              this.count++;
          }
  
          key = Object.keys(newArray[count])[0];
          newArray[count][key] = 1;
          this.setState({ names: newArray });
      }, 300);
  };
  
  count = 0;
  
  componentDidMount() {
      this.interval = setInterval(() =&gt; {
          this.animProductNames();
      }, 2000);
  }
  
  componentWillUnmount() {
      clearInterval(this.interval);
  }
  
  componentWillReceiveProps(nextProps) {
      console.log(nextProps.match);
      if (this.props.match.path !== nextProps.match.path) {
          this.setState({ ...initialProductNames });
          this.count = 0;
      }
  }
  
  render() {
      return (
          &lt;section className="home_products"&gt;
              &lt;div className="product_names_container"&gt;
                  I design &amp; build &lt;br /&gt;
                  {this.createProductNames()}
              &lt;/div&gt;
          &lt;/section&gt;
      );
  }
  
  createProductNames = () =&gt; {
      return this.state.names.map(nameObj =&gt; {
          const [name] = Object.keys(nameObj);
          return (
              &lt;span
                  key={name}
                  style={{ opacity: nameObj[name] }}
                  className="product_names_anim"&gt;
                  {name}
              &lt;/span&gt;
          );
      });
  };
  }
  </code></pre>