Initial page load empty - create-react-app - reactjs

Question

I have an app which just loads a blank page on start up, yet refreshing the page causes it to load correctly.
This is what I'm trying:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './Assets/css/app.css';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
window.processIntent = intent => {
...cordova stuff
};
window.setupAltIntent = () => {
...cordova stuff
};
function startApp() {
window.intentUrlToPrint = '';
window.setupAltIntent();
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
}
if (!window.cordova) {
startApp();
} else {
document.addEventListener('deviceready', startApp, false);
}
App.js
import React, { Component } from 'react';
import AppActivity from './Views/activity/AppActivity';
import Header from './Components/header';
import AppRouter from './AppRouter';
class App extends Component {
componentDidMount() {
if (navigator.splashscreen) {
navigator.splashscreen.hide();
}
}
render() {
return (
<div>
<div>
<Header />
<AppRouter />
</div>
<AppActivity />
</div>
);
}
}
export default App;
AppRouter.js
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from './Pages/Home';
import Contact from './Pages/Contact';
import LogInForm from './Pages/RegisterAndLogin/LogIn';
const AppRouter = () => (
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/contact" component={Contact} />
<Route path="/login" component={LogInForm} />
</Switch>
</div>
);
export default AppRouter;
Header.js
import React, { Component } from 'react';
import HeaderNotLoggedIn from './Headers/HeaderNotLoggedIn';
import HeaderLoggedIn from './Headers/HeaderLoggedIn';
class Header extends Component {
constructor(props) {
super(props);
this.isLoggedOn = this.isLoggedOn.bind(this);
}
isLoggedOn() {
return localStorage.getItem('user');
}
render() {
const header = this.isLoggedOn() ? <HeaderLoggedIn /> : <HeaderNotLoggedIn />;
return <div>{header}</div>;
}
}
export default Header;
Quite new to react, is there anything I'm missing here?
Why does the app only load correctly on page refresh?

Answer 1

I don't have a way to to solve your exact problem, because there are a lot of components, logic, and connections I don't have access to, and so I have to make guesses about. I assume that setupAltIntent returns a promise (though it doesn't totally matter if it does something else). In App I set it up to conditionally render Header once the data has been loaded into the state, which happens when setState is called after the promise is resolved.
Hopefully this gets you far enough to figure out what exactly you need for your own solution.
Link to my solution: