Ionic react app showing blank page after first state change - reactjs

Question

I've following issue with my ionic react app.
After initial launch the Login page appears as expected.
After successful login, this.state.login.status turns true and the Home component gets loaded (seeing log output of this component). But the screen only shows a blank page.
After reloading the page (with successful login data; I'm saving this in localStorage), the Home component appears as expected.
This behaviour is the same on every device (Chrome, Android, Ios). And the console doesn't show any error message.
I only saw one difference between Android and Chrome. If I logout with chrome, the Login page appears and I can relog (without the blank page). So the issue is only for the first state change.
If I'm using my android app (built with Capacitor), the blank page appears on every state change and I have to restart the app, after every login/logout.
Does anyone have an idea what could cause this behaviour? I already searched for similar problems, but nothing of them worked. For instance changing the homepage to '.' in package.json.
App.tsx:
import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet } from '#ionic/react';
import { IonReactRouter } from '#ionic/react-router';
import Home from './pages/Home';
import Login from './pages/Login';
import Xxx from './util/Xxx';
/* Core CSS required for Ionic components to work properly */
import '#ionic/react/css/core.css';
/* Basic CSS for apps built with Ionic */
import '#ionic/react/css/normalize.css';
import '#ionic/react/css/structure.css';
import '#ionic/react/css/typography.css';
/* Optional CSS utils that can be commented out */
import '#ionic/react/css/padding.css';
import '#ionic/react/css/float-elements.css';
import '#ionic/react/css/text-alignment.css';
import '#ionic/react/css/text-transformation.css';
import '#ionic/react/css/flex-utils.css';
import '#ionic/react/css/display.css';
/* Theme variables */
import './theme/variables.css';
interface AppProps {};
interface AppState {
isSignedIn: boolean,
user: string
};
class App extends React.Component<AppProps, AppState> {
constructor(props: AppProps) {
super(props);
const login = Xxx.isSignedIn();
this.state = {
isSignedIn: login.status,
user: login.user
};
this.checkLogin = this.checkLogin.bind(this);
}
checkLogin() {
const login = Xxx.isSignedIn();
this.setState({
isSignedIn: login.status,
user: login.user
});
}
render() {
return (
<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route
path="/home"
exact={true}
render={
props => {
return this.state.isSignedIn ?
<Home {...props} user={this.state.user} checkLogin={this.checkLogin}/> :
<Login checkLogin={this.checkLogin}/>;
}
}
/>
<Route exact path="/" render={() => <Redirect to="/home" />} />
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
);
}
};
export default App;

Answer 1

Could you try this ?
I think it's because the virtual dom do not change...
if (!this.state.isSignedIn) {
return <Login checkLogin={this.checkLogin}/>
}
return (
<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route
path="/home"
exact={true}
render={
props => <Home {...props} user={this.state.user} checkLogin={this.checkLogin}/>
}
}
/>
<Route exact path="/" render={() => <Redirect to="/home" />} />
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
);

Answer 2

look at using React.Context to create an context for managing the application state, then you dont need to be passing the state all over the place with properties
const App: React.FC = () => {
const { authCtx } = React.useContext(AppContext);
return (
<IonApp>
{authCtx.authenticated ? (
<IonReactRouter>
<IonSplitPane contentId="main">
<Menu />
<IonRouterOutlet id="main">
<Route path="/page/:name" component={Page} exact />
<Redirect from="/" to="/page/Inbox" exact />
</IonRouterOutlet>
</IonSplitPane>
}
</IonReactRouter>
) : (
<IonReactRouter>
<Route path="/auth/login" component={LoginPage} exact />
<Route
path="/auth/create-account"
component={CreateAccountPage}
exact
/>
<Redirect from="/" to="/auth/login" exact />
</IonReactRouter>
)}
</IonApp>
);
};
IN index.ts
import { AuthProvider } from "./helpers/my-context";
ReactDOM.render(
<AuthProvider>
<App />
</AuthProvider>,
document.getElementById("root")
);
In my-context.ts
import React from "react";
// create the context
export const Context = React.createContext<any>(undefined);
// create the context provider, we are using use state to ensure that
// we get reactive values from the context...
export const AuthProvider: React.FC = ({ children }) => {
// the reactive values
const [authCtx, setAuthCtx] = React.useState({
authenticated: null,
user: null,
});
// the store object
let state = {
authCtx,
setAuthCtx,
};
// wrap the application in the provider with the initialized context
return <Context.Provider value={state}>{children}</Context.Provider>;
};
export default Context;