title: React: reading data passed as parameter in history.push
body: <p>I am new to react and I am trying to send some data as parameter in <code>history.push</code>.</p>
  
  <p>Basically I am calling a method on a button click and inside the method I am calling an api. If I get success response I redirect to other page and I need to pass some data as well.</p>
  
  <p>Below is my code for that:</p>
  
  <pre><code>class Login extends Component  {
  
    constructor(props) {
      super(props);
      this.state = {
        enteredName: null,
        enteredPwd: null,
        rescode: null,
        userName: null,
        formatDesc: null,
        userFormat : null,
        success: false,
        responseJson : null,
      };
    }
  
    state = {
      enteredName: null,
      enteredPwd: null,
      rescode: null,
      userName: null,
      formatDesc: null,
      userFormat : null,
      success: false,
      responseJson : null,
    }
      render=() =&gt;{
  
          return (
            &lt;Router&gt;
            &lt;div id= "login-page"&gt;
              &lt;div className="back-image" style={{height:"100vh"}}&gt;
                &lt;div className="container"&gt;
                  &lt;form className="form-login" action="index.html"&gt;
                    &lt;h2 className="form-login-heading"&gt;sign in now&lt;/h2&gt;
                    &lt;div className="login-wrap"&gt;
                      &lt;label&gt;User ID&lt;/label&gt;
                      &lt;input type="text" ref="usrname" className="form-control" placeholder="User ID" autofocus/&gt;
                      &lt;br/&gt;
                      &lt;label&gt;Password&lt;/label&gt;
                      &lt;input type="password" ref = "password" className="form-control" placeholder="Password"/&gt;
                      &lt;br/&gt;
                      &lt;a  className="btn btn-theme btn-block" onClick={this.login.bind(this)}&gt;&lt;i className="fa fa-lock mr-10"/&gt;SIGN IN&lt;/a&gt;
                      &lt;Dialog ref={(component) =&gt; { this.dialog = component }} /&gt;
                    &lt;/div&gt;
                  &lt;/form&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;/Router&gt;
          );
  
  }
  login = (e) =&gt; {
    e.preventDefault();
  
    fetch('some url', {
      method: 'POST',
      body: JSON.stringify({
        "userId": this.refs.usrname.value,
        "password": this.refs.password.value
      })
    })
      .then((response) =&gt; response.json())
      .then((responseJson) =&gt; {
        console.log(`response: ` , responseJson)
        if (responseJson.errorCode === '00') {
          this.setState({ rescode: responseJson.errorCode })
          this.setState({ userName: responseJson.userName })
          this.setState({ formatDesc: responseJson.formatDesc });
          this.setState({userFormat : responseJson.userFormat});
          this.setState({success : true});
          this.setState({responseJson: responseJson});
          this.props.history.push(
            '/Taskactive',
            {
              role_id : this.userFormat,
              userName : this.userName
            }
          );
        }
        else {
          alert("Error Logging in.." + responseJson.errorMsg);
          this.refs.usrname.value = "";
          this.refs.password.value = "";
        }
  
      })
      .catch((error) =&gt; {
        console.error(error);
      });
  
    this.refs.usrname.value = "";
    this.refs.password.value = "";
  }
  </code></pre>
  
  <p>so everything is fine till now,but now I need to read the data passed i.e.  <strong>role_id</strong> and <strong>userName</strong> in the next page i.e. <strong>Taskactive</strong>. So how can we read those data in <code>Taskactive.jsx</code> ? </p>