React.js 成功登录后渲染 App.js

Question

When an User succesfully is logged in through LoginForm.js

LoginForm.js

  ----constructor, etc.----
  }resetForm() {
    this.setState({
      //bla bla
    });
  }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;
          console.log("current_user_id: " + UserStore.id);
          this.resetForm();
          this.showCalendar();
        } 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>
    );
  }
} ```

I want to render the page to <Calendar /> (Component Class Calendar.js). So that the user gets the main page of the application. 

I dont know, how i can get back to App.js to render the page, after getting the response "true" from the backend (--> Login Succesful).

I tried it with
``` showCalendar() {
    React.render(<Calendar/>);
  } ```

but it doesnt work.

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

export default new UserStore();
App.js
``` class App extends React.Component {
  componentDidMount() {
    
  }

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

In my research in the internet i didnt found a solution to that. In my eyes there must be a way to add an eventlistener to the Userstore.id. So if the UserStore.id changes (happens when user logs in), we can rearrange the page to.

Answer 1

This is all you need to do: please separate the LoginForm.js file to a separate file.

Import the withRouter

import { withRouter } from 'react-router'

then change your showCalendar to be like this:

showCalendar() {
    const { history: { push } } = this.props;
    push('/calendar');
}

and don't forget to wrap your component in withRouter as well:

export default withRouter(LoginForm);

Answer 2

1. Since you are using react-router-dom, you can use history to redirect your user to "/calendar" route after successful login.

this.props.history.push('/calendar')

2. You can check if the "UserStore.isLoggedIn" is still true or not on the calendar route by whatever state management tool or mechanism you are using. If it is not true then you need to send the user back to the login page.