呼喚遠(yuǎn)方
2022-09-02 21:38:11
在 ReactJS 中成功登錄后如何重定向到?以及每當(dāng)用戶輸入錯(cuò)誤的憑據(jù)時(shí)如何顯示?我嘗試了類似下面的方法,但它沒有成功登錄后,并且每當(dāng)用戶點(diǎn)擊錯(cuò)誤的憑據(jù)時(shí)也不會(huì)顯示提示。如果有人能弄清楚我在哪里犯了錯(cuò)誤,那就太好了。homepageerror messageredirecthomepagelogin failed./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 }; fetch('http://localhost:8000/api/login', options).then(() => { this.props.history.push('/home') }).catch((error) => { alert('Login Failed!') }) }; 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"/> </div>
2 回答

臨摹微笑
TA貢獻(xiàn)1982條經(jīng)驗(yàn) 獲得超2個(gè)贊
如果組件是 來自 的直接子組件,則可以調(diào)用 this.props.history.push('/url');如果沒有,您可以像這樣導(dǎo)出組件:
import {withRouter} from 'react-router-dom';
....
export default withRouter(ComponentName);
然后你可以稱之為this.props.history.push('/url');
若要顯示錯(cuò)誤,需要將錯(cuò)誤推送到狀態(tài),并在 render 方法中執(zhí)行此操作:
{this.state.errors !== [] && (
{this.state.errors.map(error => (
{/*Display the error*/}
))}
)}

SMILET
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊
假設(shè)你使用react-router-dom,你可以使用
<Redirect to="/somewhere/else" />
請(qǐng)確保設(shè)置的路由與您提供給重定向組件的路徑相匹配
添加回答
舉報(bào)
0/150
提交
取消