React neue Page öffnen

BackyardCoder

Grünschnabel
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.)

Javascript:
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"));
)

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)

Javascript:
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;
Javascript:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import UserStore from "./stores/UserStore";

class Calendar extends React.Component {
  render() {
    return (
      <div className="calendar" id="123">
        <h1>calendar</h1>
      </div>
    );
  }
}

export default Calendar;

Javascript:
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");
    <Router>
    <Route path = "/calendar">
      <Calendar/>
    </Route>
    </Router>
   
  }

  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();
         return true;
         


        } 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;

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.

Javascript:
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();

Freundliche Grüsse und ich bedanke mich schon mal für die Hilfe
 
Zuletzt bearbeitet:
Du hast komische Code-Tags gesetzt. Ich habe sie mal angepasst. Hast du von einem anderen Forum kopiert oder wie kommst du auf diese Tags?
[CODE lang="javascript" title="LoginForm.js" highlight="106,72,39-41,43"]
 
Du hast komische Code-Tags gesetzt. Ich habe sie mal angepasst. Hast du von einem anderen Forum kopiert oder wie kommst du auf diese Tags?
[CODE lang="javascript" title="LoginForm.js" highlight="106,72,39-41,43"]
Tut mir leid, ich hatte ein Problem mit dem Formatieren, jetzt sollte es jedoch passen.

Freundliche Grüsse
 
Hi,

für solche Fälle gibt es die HOC (Higher Order Component) withRouter, die von react-router zur Verfügung gestellt wird. Durch diese erhalten Komponenten die Methoden history, location und match als Properties übergeben. Weitere Informationen findest du z.B. hier: withRouter

Dazu sollten folgende Änderungen in deiner LoginForm Komponente notwendig sein:
Javascript:
// ...
// import withRouter
import { Route, Router, withRouter } from "react-router";

// ...

showCalendar() {
  this.props.history.push("/calendar");
}

// ...

// wrap default import in HOC
export default withRouter(LoginForm);

Kleines Beispiel (mit Klassen-Komponente und als funktionale Komponente): react-router (withRouter, HOC) - CodeSandbox

Vielleicht hilft dir das weiter.

Ciao,
Quaese
 

Neue Beiträge

Zurück