React Page öffnen

[backyardCoder]

Hallo zusammen
Ich nutze React (erste Projekt und daher kenne ich mich nicht gut aus) . Ich möchte nachdem das Login korrekt war, calender.js anzeigen lassen. Das Problem ist, das ich es nicht schaffe calender.js zu öffnen.
Bei der Methode doLogin() in der Klasse LoginForm.js wird geprüft ob die Serverantwort -1 ist, wenn sie != -1 ist dann war das Login erfolgreich und es sollte Calendar.js geöffnet werden (Was eigentlich in der Methode showCalendar() vorgesehen ist.)

Ich habe es schon auf verschiedene Arten versucht, jedoch hat keine funktioniert. Habt ihr villeicht einen Lösungsvorschlag.
Ich habe es schon mit "Redirect" und mit "userhistory()" versucht (eventuell hab ich dort auch einen Fehler gemacht, da ich bei userHistory immer einen Fehler mit den Hooks erhalten habe den ich nicht lösen konnte.)

[CODE lang="javascript" title="App.js"]import React, { Component } from "react";
import { observer } from "mobx-react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import UserStore from "./stores/UserStore";
import Home from "./Home";
import UserList from "./UserList";
import Calendar from "./Calendar";

class App extends React.Component {
componentDidUpdate() {
if (UserStore.id != -1 && UserStore.id != 0) {
console.log(UserStore.id);
console.log("Calendar");
}
}

render() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/calendar">Calendar</Link>
</li>
<li>
<Link to="/userlist">Userlist</Link>
</li>
</ul>
</nav>

{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/calendar">
<Calendar />
</Route>
<Route path="/userlist">
<UserList />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
}

export default App;

ReactDOM.render(<App />, document.querySelector("#app"));
[/CODE]

Die Links habe ich als Test hinein genommen, über diese kann ich Calendar.js problemlos öffnen. Ich möchte jedoch das es automatisch geschied wenn das Login korrekt war (Methode doLogin() in LoginForm überprüft die Serverantwort)

[CODE lang="javascript" title="Home.js"]import React, { Component } from "react";
import ReactDOM from "react-dom";
import UserStore from "./stores/UserStore";
import LoginForm from "./components/LoginForm";
import RegisterForm from "./components/RegisterForm";

class Home extends React.Component {
render() {
return (
<div className="home">
<LoginForm />
<RegisterForm />
</div>
);
}
}

export default Home;
[/CODE]

[CODE lang="javascript" title="Calendar.js"]import React, { Component } from "react";
import ReactDOM from "react-dom";
import UserStore from "./stores/UserStore";
import LoginForm from "./components/LoginForm";
import RegisterForm from "./components/RegisterForm";

class Home extends React.Component {
render() {
return (
<div className="home">
<LoginForm />
<RegisterForm />
</div>
);
}
}

export default Home;
[/CODE]

[CODE lang="javascript" title="LoginForm.js" highlight="106,72,39-41,43"]import axios from "axios";
import React from "react";
import InputField from "./InputField";
import SubmitButton from "./SubmitButton";
import UserStore from "../stores/UserStore";
import Header from "./Header";
import Calendar from "../Calendar";
import { Link, Redirect } from "react-router-dom";
import { result } from "lodash";
import { Route, Router, useHistory } from "react-router";

class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: "",
buttonDisabled: false,
};
}

setInputValue(property, value) {
value = value.trim();
if (value.length > 25) {
return;
}
this.setState({
[property]: value,
});
}

resetForm() {
this.setState({
email: "",
password: "",
buttonDisabled: false,
});
}
showCalendar() {
console.log("showCalendar");
}

doLogin() {
if (!this.state.email) {
console.log("'Email' darf nicht leer sein");
return;
}
if (!this.state.password) {
console.log("'Passwort' darf nicht leer sein");
return;
}
this.setState({
buttonDisabled: true,
});
axios
.post(
"http://localhost:8080/api/login",
{
userEmail: this.state.email,
userPassword: this.state.password,
},
{
withCredentials: true, //ein Cookie wird gesetzt
}
)
.then((response) => {
if (response.data != -1) {
console.log("login erfolgreich", response);
UserStore.isLoggedIn = true;
UserStore.id = response.data; //current user id wird zugewiesen
UserStore.email = this.state.email;
this.showCalendar();
console.log("current_user_id: " + UserStore.id);
this.resetForm();

} else {
console.log("login fehlgeschlagen", response);
this.resetForm();
}
})
.catch((error) => {
console.log("API-Call fehlgeschlagen", error);
this.resetForm();
});
}

render() {
return (
<div className="loginForm">
<Header name="Login" />
<InputField
type="email"
placeholder="Email"
value={this.state.email ? this.state.email : ""}
onChange={(value) => this.setInputValue("email", value)}
/>
<InputField
type="password"
placeholder="Password"
value={this.state.password ? this.state.password : ""}
onChange={(value) => this.setInputValue("password", value)}
/>
<SubmitButton
text="Login"
disabled={this.state.buttonDisabled}
onClick={() => this.doLogin()}
/>

</div>
);
}
}
export default LoginForm;
[/CODE]

in der Methode doLogin() wird die Antwort vom Server geprüft wenn die Antwort !=-1 ist war das Login erfolgreich und ich möchte die calendar.js datei öffenn lassen, was in der Methode showCalendar passieren sollte.

[CODE lang="javascript" title="UserStore.js"]import { extendObservable } from "mobx";

/**
* Daten des momentan angemeldeten User speichern
*/

class UserStore {
constructor() {
extendObservable(this, {
isLoggedIn: false,
email: "",
userName: "",
id: 0,
});
}
}

export default new UserStore();
[/CODE]

Freundliche Grüsse und ich bedanke mich schon mal für die Hilfe