使用 React 成功登录后如何呈现新组件

Question

I've made a very simple Login component for learning purpose. If the user enters the correct username and password he should see the Homepage . Login mechanism is working fine. I'm not able to redirect to Homepage after successful login.

users.json

[
  {
    "ID": 1,
    "Username": "mike",
    "Password": "User1Password"
  },
  {
    "ID": 2,
    "Username": "robert",
    "Password": "User2Password"
  }
]

Login.js

import React, { Component } from 'react';
...
import UserProfiles from './users.json';
import Home from '../Home/Home';

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
      loginStatus: 'not logged in',
    };
  }

  ...

  handleSubmit = (event) => {
    var found = false;
    event.preventDefault();
    UserProfiles.forEach((user) => {
      if (user.Username == this.state.username) {
        found = true;
      }
    });
    if (found) {
      this.setState({
        loginStatus: 'Successfully logged in!',
      });
    } else {
      this.setState({
        loginStatus: 'Login failed!',
      });
    }
  };

  render() {
    return (
      <div className="login-form">
        <Form onSubmit={this.handleSubmit}>
          <FormGroup>
            //USERNAME AND PASSWORD FIELDS
          </FormGroup>
          <Button type="submit">Submit</Button>
        </Form>
      </div>
    );
  }
}

export default Login;

Home.js is very simple as of now:

import React, { Component } from 'react';

class Home extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h1>Hello world! Welcome to homepage</h1>
      </div>
    );
  }
}

export default Home;

I'm new to React. Please pitch in. Here is the stackblitz .

Answer 1

你需要了解 React Router。