[英]Proper Usage of <Redirect />
閱讀完教程后,我設法在代碼中解決了<Redirect />
的使用問題:
import React from 'react';
import Login from './Login';
import Dashboard from './Dashboard';
import {Route, NavLink, BrowserRouter, Redirect} from 'react-router-dom';
const supportsHistory = 'pushState' in window.history;
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
redirectToDashboard: false,
}
}
//-----------------------LOGIN METHODS-----------------------------
onChangeInput(e) {
this.setState({[e.target.name]:e.target.value});
}
login(e) {
e.preventDefault();
const mainThis = this;
if (mainThis.state.username && mainThis.state.password) {
fetch('APILink')
.then(function(response) {
response.text().then(function(data) {
data = JSON.parse(data);
if (!data.error) {
mainThis.setState({redirectToDashboard:true});
} else {
alert(data.msg);
}
})
})
} else {
alert('Username and Password needed');
}
}
renderRedirect = () => {
if (this.state.redirectToDashboard) {
return <Redirect exact to='/company' />
} else {
return <Redirect exact to='/login' />
}
}
render() {
let renderedComp;
return(
<BrowserRouter
basename='/'
forceRefresh={!supportsHistory}>
<React.Fragment>
{this.renderRedirect()}
<Route exact path="/company" render={()=><Dashboard/>} />
<Route exact path="/login" render={()=><Login login={(e)=>this.login(e)} onChangeInput={(e)=>this.onChangeInput(e)} />} />
</React.Fragment>
</BrowserRouter>
)
}
}
這將根據this.state.redirectToDashboard
的值檢查要顯示的組件,但由於:
onChangeInput(e) {
this.setState({
[e.target.name]:e.target.value
});
}
每個輸入重新呈現頁面,留下我:
警告:您嘗試重定向到您當前所在的相同路線:“/ login”
我知道導致警告的原因,只是因為我無法想到其他方法來實現這項工作。 我應該做出哪些改變,或者至少要有一個想法來正確地完成這項工作?
你可以將你的Route
組件包裝在一個Switch
,這樣就可以一次只渲染一個子組件。
然后,您可以將/
to /login
的重定向添加為第一個子項,並在redirectToDashboard
為true
時redirectToDashboard
保留在Switch
外部的/company
。
例
<BrowserRouter basename="/" forceRefresh={!supportsHistory}>
<div>
{this.state.redirectToDashboard && <Redirect to="/company" />}
<Switch>
<Redirect exact from="/" to="/login" />
<Route path="/company" component={Dashboard} />
<Route
path="/login"
render={() => (
<Login
login={e => this.login(e)}
onChangeInput={e => this.onChangeInput(e)}
/>
)}
/>
</Switch>
</div>
</BrowserRouter>
當renderRedirect
中的條件不匹配時,您可能不應渲染Redirect。
代替:
renderRedirect = () => {
if (this.state.redirectToDashboard) {
return <Redirect exact to='/company' />
} else {
return <Redirect exact to='/login' />
}
}
你可以留在那里:
renderRedirect = () => {
if (this.state.redirectToDashboard) {
return <Redirect exact to='/company' />
}
return null;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.