Data not refreshing after login to homepage in reactjs

I'm saving userdata to localStorage in login component and then redirecting to the homepage. In homepage username is not updating on first visit. I have to reload the page. Then data binds to page after refresh. Please help how can I show data on first visit?

below is my homepage code

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLogin: false,
      isLogout: false,
      user: ""
    };
  }

  componentDidMount() {
    const userData = localStorage.getItem("userData");
    const user = JSON.parse(userData);
    this.setState({ user: user });
    if (userData) {
      this.setState({ isLogin: true });
    }
    console.log(userData);
    console.log(user);
  }

  logout = e => {
    e.preventDefault();
    localStorage.clear();
    this.setState({ isLogout: true });
  };

  render() {
    if (this.state.isLogin === false || this.state.isLogout === true) {
      return (
        <header
          id="kr-header"
          className="kr-header cd-auto-hide-header kr-haslayout"
        >
          <div className="container">
            <div className="row">
              <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <strong className="kr-logo">
                  <Link to="/">
                    <img src="images/logo.png" alt="company logo here" />
                  </Link>
                </strong>
                <nav className="kr-addnav">
                  <ul>
                    <li>
                      <Link
                        id="kr-btnsignin"
                        className="kr-btn kr-btnblue"
                        to="login_register"
                      >
                        <i className="icon-smiling-face" />
                        <span>Join Now</span>
                      </Link>
                    </li>
                    <li>
                      <a
                        className="kr-btn kr-btngreen"
                        href="dashboardaddlisting.html"
                      >
                        <i className="icon-plus" />
                        <span>Add Listing</span>
                      </a>
                    </li>
                  </ul>
                </nav>
                <nav id="kr-nav" className="kr-nav">
                  <div className="navbar-header">
                    <button
                      type="button"
                      className="navbar-toggle collapsed"
                      data-toggle="collapse"
                      data-target="#kr-navigation"
                      aria-expanded="false"
                    >
                      <span className="sr-only">Toggle navigation</span>
                      <span className="icon-bar" />
                      <span className="icon-bar" />
                      <span className="icon-bar" />
                    </button>
                  </div>
                  <div
                    id="kr-navigation"
                    className="collapse navbar-collapse kr-navigation"
                  >
                    <ul>
                      <li>
                        <a href="dashboard.html">Dasboard</a>
                      </li>
                    </ul>
                  </div>
                </nav>
              </div>
            </div>
          </div>
        </header>
      );
    } else {
      return (
        <header
          id="kr-header"
          className="kr-header cd-auto-hide-header kr-haslayout"
        >
          <div className="container">
            <div className="row">
              <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <strong className="kr-logo">
                  <Link to="/">
                    <img src="images/logo.png" alt="company logo here" />
                  </Link>
                </strong>
                <nav className="kr-addnav">
                  <ul>
                    <li>
                      <Link
                        id="kr-btnsignin"
                        className="kr-btn kr-btnblue"
                        to="login_register"
                      >
                        <i className="icon-smiling-face" />
                        <span>{this.state.user.user.firstname}</span>
                      </Link>
                    </li>
                    <li>
                      <a
                        className="kr-btn kr-btngreen"
                        href="dashboardaddlisting.html"
                      >
                        <i className="icon-plus" />
                        <span>Add Listing</span>
                      </a>
                    </li>
                    <li>
                      <a onClick={this.logout} className="kr-btn kr-btngreen">
                        <i className="icon-plus" />
                        <span>Logout</span>
                      </a>
                    </li>
                  </ul>
                </nav>
                <nav id="kr-nav" className="kr-nav">
                  <div className="navbar-header">
                    <button
                      type="button"
                      className="navbar-toggle collapsed"
                      data-toggle="collapse"
                      data-target="#kr-navigation"
                      aria-expanded="false"
                    >
                      <span className="sr-only">Toggle navigation</span>
                      <span className="icon-bar" />
                      <span className="icon-bar" />
                      <span className="icon-bar" />
                    </button>
                  </div>
                  <div
                    id="kr-navigation"
                    className="collapse navbar-collapse kr-navigation"
                  >
                    <ul>
                      <li>
                        <a href="dashboard.html">Dasboard</a>
                      </li>
                    </ul>
                  </div>
                </nav>
              </div>
            </div>
          </div>
        </header>
      );
    }
  }
}

Below is login-register component code

import React, {Component} from 'react';
import { Link,Redirect ,withRouter } from 'react-router-dom';
import PropTypes from "prop-types";
import Otp from './otp';
import axios from '../api';

export default class LoginRegister extends Component {
    static contextTypes = {
        router: PropTypes.object
      }
    constructor(props,context){
        super(props,context);
        this.state = {
            fname:'',
            lname:'',
            emailaddress:'',
            password:'',
            mobile:'',
            user:'',
            login_pass:'',
            isLogin:false
        }
        this.regi_data = this.regi_data.bind(this);
        this.login_data = this.login_data.bind(this);
        // this.otpModalRef = React.createRef();
    }

    regi_data(e){
        this.setState({[e.target.name] : e.target.value}
        );
    }
    login_data(e){
        this.setState({[e.target.name] : e.target.value})
    }

    // otpModalRef = ({onOpenModal}) => {
    //    this.showModal = onOpenModal;
    // }

    componentDidMount(){
        if (localStorage.getItem('userData')) {
            this.context.router.history.push({
                        pathname:'/',

                    });
        }
    }




    login = (e) => {
        e.preventDefault();
         axios.post('/api/signin', { 
                        user:this.state.user,
                        password:this.state.login_pass,
                    })
          .then(res => {
                //console.log(res);
                localStorage.setItem('userData', JSON.stringify(res.data));
                this.context.router.history.push({
                        pathname:'/',

                    });
//                  window.location.reload();
                    this.setState({isLogin: true});
          })
          .catch(function (error) {
            console.log(error.message);
          })
    }

    register = (e) => {
        e.preventDefault(); 
        axios.post('/api/user/add', { 
                        firstname: this.state.fname,
                        lastname:this.state.lname,
                        email:this.state.emailaddress,
                        password:this.state.password,
                        mobile:this.state.mobile 
                    },              
                )
          .then(res => {
                console.log(res);
                // this.showModal();
                 this.context.router.history.push({
                        pathname:'/otp_validate',
                    });            
          }).catch(function(error){
            alert(error.message)
          })
    }

from Data not refreshing after login to homepage in reactjs