登录反应js后如何渲染到家？

Question

I am learning reactjs and I came across this problem and I have not been able to solve it even looking on the internet. I have created a login with their respective validations but I don't know how to render after clicking the button and I want that once I log in, it redirects me to the main page of my application.

this is App.js

import React from 'react';
import './App.css';
import LoginForm from '../src/forms/Login/LoginForm';
import Logo from '../src/components/Logo';
import Footer from './Footer';

function App() {
  return (
    <>
      <Logo />
      <div className='login-form'>
        <LoginForm />
      </div>
      <Footer />
    </>
  );
}

export default App;

and this is LoginForm.js

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Formik } from "formik";
import * as Yup from "yup";
import Form from '../../../node_modules/react-bootstrap/Form';
import FormGroup from '../../../node_modules/react-bootstrap/FormGroup';
import Button from '../../../node_modules/react-bootstrap/Button';
import Home from '../../pages/Home';
import { BrowserRouter as Redirect } from 'react-router-dom';

class LoginForm extends React.Component{
    state = {
        islogged: false,
        loginParams: {
            email: "",
            password: ""
        }
    };

    handleFormChange = event => {
        let loginParamsNew = { ...this.state.loginParams };
        let val = event.target.value;
        loginParamsNew[event.target.name] = val;
        this.setState({
            loginParams: loginParamsNew
        });
    };

    login = event => {
        let email = this.state.loginParams.email;
        let password = this.state.loginParams.password;
        if (email === "admin@admin.com" && password === "abcd1234") {
            localStorage.setItem("token", "T");
            this.setState({
                islogged: true
            });
        }
        event.preventDefault();
    };

    handleonClick = event => {
        console.log('entro');
        if(this.islogged){
            return(
                <Redirect>
                    <Home />
                </Redirect>
        )}
    };

    render(){
        return(
            <Formik initialValues={{ email: "", password: "" }} onSubmit={(values, { setSubmitting }) => {
                setTimeout(() => {setSubmitting(false);}, 500);}} validationSchema={Yup.object().shape({
                email: Yup.string().email().required("*Campo Requerido"),
                password: Yup.string().required("*Campo Requerido")
                .min(8,"La contraseña es demasiado corta; debe tener un mínimo de 8 caracteres.")
                .matches(/(?=.*[0-9])/, "La contraseña debe contener un número.")})}>
            {(props) => { const { values, touched, errors, isSubmitting, handleChange, handleBlur, handleSubmit } = props;
                return (
                <Form onSubmit={handleSubmit}>
                    <h3>Iniciar Sesion</h3>
                    <FormGroup>
                    <Form.Label htmlFor="email">Email</Form.Label>
                    <Form.Control name="email" type="text" placeholder="Ingresar correo..." value={values.email} onChange={handleChange}
                        onBlur={handleBlur} className={errors.email && touched.email && "error"}/>
                    {errors.email && touched.email && (
                        <div className="input-feedback">{errors.email}</div>
                    )}
                    </FormGroup>
                    <FormGroup>
                    <Form.Label htmlFor="email">Contraseña</Form.Label>
                    <Form.Control name="password" type="password" placeholder="Ingresar contraseña..." value={values.password} onChange={handleChange}
                        onBlur={handleBlur} className={errors.password && touched.password && "error"}/>
                    {errors.password && touched.password && (
                        <div className="input-feedback">{errors.password}</div>
                    )}
                    </FormGroup>
                    <Button type="submit" variant="outline-danger" block disabled={isSubmitting} onClick={(event) => this.handleonClick(event)}>Iniciar Sesion</Button>
                    <div style={{textAlign:"center",margin:"5px"}}>
                        <a href='/#'>Olvido su contraseña?</a>
                    </div>   
                </Form>
                );
            }}
            </Formik>
        );
    }
}

export default LoginForm;

When I click the button it doesn't redirect to the control panel / menu and I don't know what I'm doing wrong.

this is my handleonClick

handleonClick = event => {
        console.log('entro');
        if(this.islogged){
            return(
                <Redirect>
                    <Home />
                </Redirect>
        )}
    };

So that in the end, I can see my dashboards and menu.

this is dashboard/Menu Home.js

import React from 'react';
import Navbar from '../components/Navbar';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Reports from './Reports';
import Products from './Products';
import Users from './Users';

function Home() {
  return (
    <div className='home'>
      <Router>
        <Navbar />
        <Switch>
          <Route path='/users' component={Users} />
          <Route path='/reports' component={Reports} />
          <Route path='/products' component={Products} />
        </Switch>
      </Router>
    </div>
  );
}

export default Home;

¿Can someone give me a help to continue programming? Very very thanks...

Answer 1

u need set path of home component so u can redirect it by it's path not the component don't forget to passing all props {...props}
option1

handleonClick = (e) => {
if(this.islogged){
   this.props.history.push("/login")}
}

option 2

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Formik } from "formik";
import * as Yup from "yup";
import Form from '../../../node_modules/react-bootstrap/Form';
import FormGroup from '../../../node_modules/react-bootstrap/FormGroup';
import Button from '../../../node_modules/react-bootstrap/Button';
import Home from '../../pages/Home';
import { BrowserRouter as Redirect } from 'react-router-dom';

class LoginForm extends React.Component{
    state = {
        islogged: false,
        loginParams: {
            email: "",
            password: ""
        },
        allowLogin:false
    };

    handleFormChange = event => {
        let loginParamsNew = { ...this.state.loginParams };
        let val = event.target.value;
        loginParamsNew[event.target.name] = val;
        this.setState({
            loginParams: loginParamsNew
        });
    };

    login = event => {
        let email = this.state.loginParams.email;
        let password = this.state.loginParams.password;
        if (email === "admin@admin.com" && password === "abcd1234") {
            localStorage.setItem("token", "T");
            this.setState({
                islogged: true
            });
        }
        event.preventDefault();
    };

    handleonClick = event => {
        console.log('entro');
        if(this.islogged){
            this.setState({
              allowLogin:true
            })
      }
    };

    render(){
        return(
            <Formik initialValues={{ email: "", password: "" }} onSubmit={(values, { setSubmitting }) => {
                setTimeout(() => {setSubmitting(false);}, 500);}} validationSchema={Yup.object().shape({
                email: Yup.string().email().required("*Campo Requerido"),
                password: Yup.string().required("*Campo Requerido")
                .min(8,"La contraseña es demasiado corta; debe tener un mínimo de 8 caracteres.")
                .matches(/(?=.*[0-9])/, "La contraseña debe contener un número.")})}>
            {(props) => { const { values, touched, errors, isSubmitting, handleChange, handleBlur, handleSubmit } = props;
                return (
                <Form onSubmit={handleSubmit}>
                    <h3>Iniciar Sesion</h3>
                    <FormGroup>
                    <Form.Label htmlFor="email">Email</Form.Label>
                    <Form.Control name="email" type="text" placeholder="Ingresar correo..." value={values.email} onChange={handleChange}
                        onBlur={handleBlur} className={errors.email && touched.email && "error"}/>
                    {errors.email && touched.email && (
                        <div className="input-feedback">{errors.email}</div>
                    )}
                    </FormGroup>
                    <FormGroup>
                    <Form.Label htmlFor="email">Contraseña</Form.Label>
                    <Form.Control name="password" type="password" placeholder="Ingresar contraseña..." value={values.password} onChange={handleChange}
                        onBlur={handleBlur} className={errors.password && touched.password && "error"}/>
                    {errors.password && touched.password && (
                        <div className="input-feedback">{errors.password}</div>
                    )}
                    </FormGroup>
                    <Button type="submit" variant="outline-danger" block disabled={isSubmitting} onClick={(event) => this.handleonClick(event)}>Iniciar Sesion</Button>
                    <div style={{textAlign:"center",margin:"5px"}}>
                        <a href='/#'>Olvido su contraseña?</a>
                    </div>   
                </Form>
                );
            }}
           {this.state.allowLogin===true ? <Redirect to="/home" /> : <Redirect to="/" />}
            </Formik>
            
        );
    }
}

export default LoginForm;