title: Why does ReactJS component disappear after refreshing the page
body: <p>I am trying to show <code>Instructor Profile</code> component after user clicked <code>login</code> button in <code>Instructor Login Form</code></p>
  
  <p><strong>It works fine until I refresh the page, that <code>User Profile</code> component disappears after the refresh</strong></p>
  
  <p>Here is the screenshot of the page once a user clicked <code>login</code></p>
  
  <p><a href="https://i.stack.imgur.com/YJT4M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YJT4M.png" alt=""></a></p>
  
  <p>And here is the screenshot once I refresh this above page:</p>
  
  <p><a href="https://i.stack.imgur.com/enjl5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/enjl5.png" alt=""></a></p>
  
  <p>As you can see in this second screenshot, component has disappeared (which said <strong>Welcome to the profile </strong></p>
  
  <p>This is how my <code>InstructorLoginForm</code> looks like</p>
  
  <pre><code>import React, { Component } from "react";
  import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
  import InstructorProfile from "./instructor-profile";
  import InstructorLoginFormComponent from "./instructor-login-form-component";
  
  export default class InstructorLoginForm extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        username: "",
        password: ""
      };
  
      this.onChangeUsername = this.onChangeUsername.bind(this);
      this.onChangePassword = this.onChangePassword.bind(this);
      this.handleOnClick = this.handleOnClick.bind(this);
    }
  
    onChangeUsername(e) {
      this.setState({
        username: e.target.value
      });
    }
  
    onChangePassword(e) {
      this.setState({
        password: e.target.value
      });
    }
  
    handleOnClick(e) {
      e.preventDefault();
      this.props.history.push(`/instructor/${this.state.username}`);
    }
  
    render() {
      return (
        &lt;Router&gt;
          &lt;Switch&gt;
            &lt;Route
              exact
              path="/login"
              render={props =&gt; (
                &lt;InstructorLoginFormComponent
                  {...props}
                  username={this.state.username}
                  onChangeUsername={this.onChangeUsername}
                  password={this.state.password}
                  onChangePassword={this.onChangePassword}
                  handleOnClick={this.handleOnClick}
                /&gt;
              )}
            /&gt;
  
            &lt;Route
              path={"/instructor/:username"}
              render={props =&gt; (
                &lt;InstructorProfile {...props} username={this.state.username} /&gt;
              )}
            /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      );
    }
  }
  </code></pre>
  
  <p>And this is how my <code>InstructorLoginFormComponent</code> looks like:</p>
  
  <pre><code>import React, { Component } from "react";
  import { Link } from "react-router-dom";
  
  export default class InstructorLoginFormComponent extends Component {
    constructor(props) {
      super(props);
    }
  
    componentDidMount(){
      console.log(this.props);
    }
  
    handleOnClick(e){
        e.preventDefault();
        console.log("Hello");
    }
  
    render() {
      return (
        &lt;div className="container h-100" style={{ marginTop: 100 }}&gt;
          &lt;div className="d-flex justify-content-center h-100"&gt;
            &lt;div className="user_card bg-dark"&gt;
              &lt;div className="d-flex justify-content-center"&gt;              
              &lt;/div&gt;
              &lt;div
                className="d-flex justify-content-center form_container"
                style={{ marginTop: 0 }}
              &gt;
                &lt;form&gt;
                  &lt;div className="input-group mb-3"&gt;
                    &lt;div className="input-group-append"&gt;
                      &lt;span className="input-group-text bg-info"&gt;
                        &lt;i className="fa fa-user" /&gt;
                      &lt;/span&gt;
                    &lt;/div&gt;
                    &lt;input
                      value={this.props.username}
                      onChange={this.props.onChangeUsername}
                      type="text"
                      name="username"
                      className="form-control input_user"
                      placeholder="username"
                    /&gt;
                  &lt;/div&gt;
                  &lt;div className="input-group mb-2"&gt;
                    &lt;div className="input-group-append"&gt;
                      &lt;span className="input-group-text bg-info"&gt;
                        &lt;i className="fa fa-lock" /&gt;
                      &lt;/span&gt;
                    &lt;/div&gt;
                    &lt;input
                      value={this.props.password}
                      onChange={this.props.onChangePassword}
                      type="password"
                      name="passwordbutton"
                      className="form-control input_user"
                      placeholder="password"
                    /&gt;
                  &lt;/div&gt;
                  &lt;div className="form-group"&gt;
                    &lt;div className="custom-control custom-checkbox"&gt;
                      &lt;input
                        type="checkbox"
                        className="custom-control-input"
                        id="customControlInline"
                      /&gt;
                      &lt;label
                        className="custom-control-label"
                        htmlFor="customControlInline"
                        style={{ color: "#ffffff" }}
                      &gt;
                        Remember me
                      &lt;/label&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/form&gt;
              &lt;/div&gt;
  
              &lt;div className="d-flex justify-content-center mt-3 login_container"&gt;
                &lt;Link
                  to={`/instructor/${this.props.username}`}                
                  type="button"
                  className="btn login_btn bg-info"&gt;
                  Login
                &lt;/Link&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>And this is my <code>InstructorProfile</code> looks like:</p>
  
  <pre><code>import React, { Component } from "react";
  
  export default class InstructorProfile extends Component {
  
    constructor(props) {
      super(props);
    }
  
    render() {
      return (
        &lt;div&gt;          
          &lt;h1&gt;Welcome to the profile {this.props.username}&lt;/h1&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Can someone please give me a solution for this? And I need to get rid of that Navigation bar above, which shows everytime, doesn't matter which component loads. How can I do that too?</p>
  
  <blockquote>
    <p>PS: to this point I haven't configured any database, 'cause I need to check if components work as intended before making any calls to database</p>
  </blockquote>