亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 ReactJS 中成功登錄后如何重定向到主頁?

在 ReactJS 中成功登錄后如何重定向到主頁?

慕的地8271018 2022-08-27 09:28:59
如何在 ReactJS 中重定向到主頁?而且我還想在用戶輸入錯誤的憑據時顯示。我可能是ReactJS的新手,如果有人能幫助我解決我試圖解決的問題,那就太好了。非常感謝你提前,也將不勝感激。successful loginerror message./src/Login.jsimport React, {Component} from "react";import {Form} from 'antd';export default class App  extends Component{  constructor(props) {        super(props);        this.state ={            username: "",            password: "",        }        this.onFormSubmit = this.onFormSubmit.bind(this)    }    onFormSubmit(values){      console.log(values);      const formData = new FormData();      formData.append("username", values.username);      formData.append("password", values.password);        const options = {            method: 'POST',            body: formData        };      try{        fetch('http://localhost:8000/api/login', options).then(() => {          this.props.history.push('/home')        });      }      catch (error) {        alert('Login Failed. Try Again')      }    }; render(){    return(      <div>                            <Form onFinish={this.onFormSubmit}>                                <div class="col-md-12 form-group p_star">                                    <Form.Item name="username">                                      <input type="text" class="form-control" placeholder="Username"/>                                    </Form.Item>                                </div>                                <div class="col-md-12 form-group p_star">                                  <Form.Item name="password">                                    <input type="password" class="form-control"                                        placeholder="Password"/>                                   </Form.Item>                                </div>     </div>
查看完整描述

3 回答

?
LEATH

TA貢獻1936條經驗 獲得超7個贊

如果你正在使用,那么你應該像這樣使用react-router


    console.log(values);


    const formData = new FormData();

    formData.append("username", values.username);

    formData.append("password", values.password);


      const options = {

          method: 'POST',

          body: formData

      };


      fetch('http://localhost:8000/api/login', options).then((response) => {


        notification.success({

            message: "login successfully."

        });

        this.props.history.push('/your-homepage-route') <---- Navigate after successful login

      }).catch(error => {

        alert('Login Failed. Try Again') <----- Error Handling

      });

  };```


查看完整回答
反對 回復 2022-08-27
?
子衿沉夜

TA貢獻1828條經驗 獲得超3個贊

我認為對于重定向,如果您使用包進行路由,這將很容易:react-router-dom

  1. 如果您將其用于路由,例如,這會對此組件進行增壓,從而可以輕松進行編程重定向:<Route path="/login" component={Login}/>

    this.props.history.push('/home')
  2. 否則,您需要使用同一包中的高度順序組件,然后包裝您的組件,最后用于重定向import { withRouter} from 'react-router-dom'withRouter(Login)this.props.history.push('/home')


查看完整回答
反對 回復 2022-08-27
?
紅顏莎娜

TA貢獻1842條經驗 獲得超13個贊

要重定向到新頁面,這不依賴于 react:

window.location = 'http://www.whateveryourpathis.com';


查看完整回答
反對 回復 2022-08-27
  • 3 回答
  • 0 關注
  • 260 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號