title: react render method is called Twice, changing url
body: <p>I am newbie in react. I read <a href="https://stackoverflow.com/questions/27628504/react-js-componentwillreceiveprops-being-hit-twice">this question</a> , but didn't solve my problem. I think I'm wrong with componentWillReceiveProps comprehension . My component and it's parent are like this:
  the parent:</p>
  
  <pre><code>import React from 'react';
  import { Router, Route, Link } from 'react-router';
  
  export default class App extends React.Component {
  
  items = [
      {id: 1086, title: 'MENU1'},
      {id: 1083, title: 'MENU2'},
      {id: 1093, title: 'MENU3'}]
  
  renderItems = ()=&gt; {
      return this.items.map((item, index)=&gt; {
          let url = 'content/' + item.id;
          return (&lt;li key={index}&gt;&lt;Link to={url} activeClassName="active"&gt;{item.title}&lt;/Link&gt;&lt;/li&gt;);
      });
  }
  
  
  render() {
      return (
          &lt;div&gt;
              &lt;h1 style={{textAlign:'center'}}&gt;My First React App&lt;/h1&gt;
              &lt;ul className="nav nav-pills nav-justified"&gt;{this.renderItems()}&lt;/ul&gt;
              {this.props.children}
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>}</p>
  
  <p>the child:</p>
  
  <pre><code>import React, { Component } from 'react';
  import UmContent from './UmContent'
  import $ from 'jquery';
  import ProgressBar from 'progressbar.js';
  
  
  export default class UmContentContainer extends Component {
  state = {
      data: ''
  }
  
  firstInitial = true;
  
  componentDidMount() {
      if (this.firstInitial) {
          let props = this.props;
          this.sendRequestToServer(props);
          this.firstInitial = false;
      }
  }
  
  sendRequestToServer = (props)=&gt; {
      if (!props || !props.params || !props.params.id) {
          return;
      }
      let itemId = props.params.id;
      let that = this;
      this.setState({data: itemId});
       }
  
  componentWillReceiveProps(props, states) {
      this.sendRequestToServer(props);
       console.log(props.params.id);
  }
  
  render() {
      return (
          &lt;div className="col-md-12"&gt;
              &lt;h1&gt;{this.state.data}&lt;/h1&gt;
          &lt;/div&gt;);
  }
  </code></pre>
  
  <p>}</p>
  
  <p>and index.js :</p>
  
  <pre><code>import React from 'react'
  import { render } from 'react-dom'
  import { Router, Route, Link,hashHistory } from 'react-router'
  import App from './App';
  import UmContentContainer from './Umbreco/UmContentContainer';
  
  render((
  &lt;Router history={hashHistory}&gt;
      &lt;Route path="/" component={App}&gt;
              &lt;Route path="/content/:id" component={UmContentContainer} /&gt;
      &lt;/Route&gt;
  &lt;/Router&gt;
  ), document.getElementById('root'))
  </code></pre>
  
  <p>after first mounting , console writes "id" twice. I can't understand why?</p>