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.

CodePudding user response：

You should modify the code like this :

https://stackblitz.com/edit/react-48hgqd?file=src/index.js

https://stackblitz.com/edit/react-48hgqd?file=src/containers/Login/Login.js

The following code is work:

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import Home from './containers/Home/Home.js';
import Login from './containers/Login/Login.js';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter basename="/">
    <Switch>
      <Route exact path="/">
        <Login />
      </Route>
      <Route path="/home">
        <Home />
      </Route>
    </Switch>
  </BrowserRouter>,
  document.getElementById('root')
);

Login.js

import React, { Component } from 'react';
import { Input } from 'reactstrap';
import { Form, FormGroup } from 'reactstrap';
import { Label } from 'reactstrap';
import { Button } from 'reactstrap';
import UserProfiles from './users.json';
import './Login.css';
import { withRouter } from 'react-router-dom';

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

  handleUsernameChange = (event) => {
    this.setState({
      username: event.target.value,
    });
  };

  handlePasswordChange = (event) => {
    this.setState({
      password: event.target.value,
    });
  };

  handleSubmit = (event) => {
    var found = false;
    event.preventDefault();
    UserProfiles.forEach((user) => {
      // as of now checks for correct username only and not the password
      if (user.Username == this.state.username) {
        found = true;
      }
    });
    if (found) {
      this.setState({
        loginStatus: 'Successfully logged in!',
      });
      console.log(this.props);
      this.props.history.push('/home');
    } else {
      this.setState({
        loginStatus: 'Login failed! Inavlid User/Pass',
      });
    }
  };

  render() {
    return (
      <div className="login-form">
        <Form onSubmit={this.handleSubmit}>
          <FormGroup>
            <Label for="username">Username:</Label>
            <Input
              id="username"
              name="username"
              placeholder="For e.g. tmtanzeel"
              onChange={this.handleUsernameChange}
              type="text"
              value={this.state.username}
            />
          </FormGroup>
          <FormGroup>
            <Label for="examplePassword">Password</Label>
            <Input
              id="password"
              name="password"
              placeholder="enter your password"
              onChange={this.handlePasswordChange}
              type="password"
            />
          </FormGroup>
          <Button type="submit">Submit</Button>
        </Form>
        <h2>{this.state.loginStatus}</h2>
      </div>
    );
  }
}

export default withRouter(Login);