title: React:Not able to access the component form data into another component
body: <p>I have two components one is Home component and Category component. First its redirecting to Home page use of routing.
  In home page ,I have two fields, username and password. I filled the username and password and click on submit, its redirecting to category page.
  I want access the username and password fields in category component.
  I am not able to access those fields in category component.</p>
  
  <pre><code>render() {
  return (
    &lt;Router&gt;
      &lt;div&gt;
        &lt;nav className="navbar navbar-default"&gt;
          &lt;div className="container-fluid"&gt;
            &lt;div className="navbar-header"&gt;
              &lt;a className="navbar-brand" href="#"&gt;WebSiteName&lt;/a&gt;
            &lt;/div&gt;
            &lt;ul className="nav navbar-nav"&gt;
              &lt;li&gt;
                &lt;Link className="active" to="/"&gt;Home&lt;/Link&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;Link to="/category"&gt;Category&lt;/Link&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
  
        &lt;hr /&gt;
        &lt;Route exact path="/" component={Home} /&gt;
        &lt;Route path="/category" component={Category} /&gt;
      &lt;/div&gt;
    &lt;/Router&gt;
  
  )
  
   render() {
  return (
    &lt;form &gt;
      &lt;label&gt;
        Name:
        &lt;input type="text" name="username" value={this.state.username} onChange = {(event) =&gt; this.setState({username:event.target.value})}/&gt;
      &lt;/label&gt;
      &lt;br/&gt;
      &lt;label&gt;
        password:
        &lt;input type="text" name="password" value={this.state.password} onChange = {(event) =&gt; this.setState({password:event.target.value})}/&gt;
      &lt;/label&gt;
      &lt;br/&gt;
      &lt;input class="btn btn-primary" type="submit" onClick={(event) =&gt; this.handleClick(event)} value="Submit" /&gt;
    &lt;/form&gt;
  );
  }  
  }
  
  constructor(props) {
              super(props);
              console.log("props", this.props);
  
              console.log("props....", props)
      }
      clickForSettings() {
              this.props.history.push('/settings');
      }
  
      render() {
              return (
                      &lt;div&gt;
                      &lt;h1&gt;This is Category Page{this.props.username}&lt;/h1&gt;
  
                      &lt;/div&gt;
  
              );
      }
  </code></pre>