title: Passing data from one page to another while using router and state in ReactJS
body: <p>I am new to ReactJS. I am trying to figure out how to pass data from one page to another while using router. When I click on Add User button, I want to add the user and navigate back to home page.</p>
  
  <p>I've searched the web for this and found examples where data is transferred from parent to child using props. But here I am using router. How can I find a way to do this?</p>
  
  <p>index.js</p>
  
  <pre><code>ReactDOM.render(
      &lt;Router history={browserHistory}&gt;
          &lt;Route path="/" component={Home}&gt;
              &lt;IndexRoute component={AllUsers}/&gt;
          &lt;/Route&gt;
          &lt;Route path="/add" component={Add}/&gt;
      &lt;/Router&gt;
      , document.getElementById('root'));
  </code></pre>
  
  <p>Home.js:</p>
  
  <pre><code>class Home extends Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;nav&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;Link to="/"&gt;Home&lt;/Link&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;Link to="/add"&gt;Add&lt;/Link&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
                  &lt;div&gt;
                      {this.props.children}
                  &lt;/div&gt;
              &lt;/div&gt;
  
          );
      }
  }
  </code></pre>
  
  <p>AllUsers.js</p>
  
  <pre><code>class AllUsers extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              headingsData: ["Name"],
              rowsData: []
          }
      }
  
      componentDidMount() {
          this.setState({
              rowsData: [{name: "Alex"}, {name: "Jack"}]
          })
      }
  
      render() {
          return (
              &lt;div className="allUsersContainter"&gt;
                  &lt;h2&gt;All users&lt;/h2&gt;
                  &lt;table border="1" className="tableComp"&gt;
                      &lt;Headings headings={this.state.headingsData}/&gt;
                      &lt;tbody&gt;
                      &lt;Rows rows={this.state.rowsData}/&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
  
          );
      }
  }
  
  
  class Headings extends Component {
      render() {
          let headings = this.props.headings.map((heading, i) =&gt; {
              return (&lt;th&gt;{heading}&lt;/th&gt;);
          });
          return (&lt;thead&gt;&lt;tr&gt;{headings}&lt;/tr&gt;&lt;/thead&gt;);
      }
  
  }
  
  class Rows extends Component {
      render() {
          let rows = this.props.rows.map((row, i) =&gt; {
              return (&lt;tr key={i}&gt;&lt;td&gt;{row.name}&lt;/td&gt;&lt;/tr&gt;);
  
          });
          return (&lt;tbody&gt;{rows}&lt;/tbody&gt;);
      }
  }
  
  export default AllUsers;
  </code></pre>
  
  <p>Add.js</p>
  
  <pre><code>class Add extends Component {
      render() {
          return (
              &lt;form&gt;
                  &lt;label&gt;First Name:&lt;/label&gt;&lt;input placeholder="Name" ref="name" required/&gt;&lt;br/&gt;
                  &lt;button type="submit"&gt;Add user&lt;/button&gt;
              &lt;/form&gt;
          );
      }
  }
  
  export default Add;
  </code></pre>