[英]how to render to home after login in react js?
我正在學習 reactjs 並且遇到了這個問題,即使在互聯網上查看也無法解決。 我已經創建了一個帶有各自驗證的登錄名,但我不知道單擊按鈕后如何呈現,我希望一旦我登錄,它將我重定向到我的應用程序的主頁。
這是 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;
這是 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;
當我單擊按鈕時,它不會重定向到控制面板/菜單,我不知道我做錯了什么。
這是我的handleonClick
handleonClick = event => {
console.log('entro');
if(this.islogged){
return(
<Redirect>
<Home />
</Redirect>
)}
};
最后,我可以看到我的儀表板和菜單。
這是儀表板/菜單 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;
¿ 有人可以幫我繼續編程嗎? 非常非常感謝...
你需要設置主組件的路徑,這樣你就可以通過它的路徑而不是組件來重定向它不要忘記傳遞所有道具 {...props}
選項1
handleonClick = (e) => {
if(this.islogged){
this.props.history.push("/login")}
}
選項 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;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.