Comment communiquer lors de la diffusion de sous-pages ?
import { HashRouter as Router, Route, Link } from 'react-router-dom'
class Index extends Component {
render() {
return (
<Router basename="/index">
<p className="index-content" >
<Link to="/library">library</Link>
<Link to="/passbook">passbook</Link>
<Link to="/login">login</Link>
<br/>
<Route path="/library" component={Library}/>
<Route exact path="/passbook" component={Passbook}/>
<Route path="/login" component={Login}/>
</p>
</Router>
)
}
}
export default Index;
1. La page de connexion (#/index/login) utilise this.state.isLogin pour identifier l'état de connexion, this.state.isLogin devient vrai
.2. à ce stade, je passe à la page du livret (#/index/passbook) et j'ai besoin du isLogin de la page de connexion (#/index/login) pour déterminer quel composant de l'interface utilisateur doit être rendu. Comment puis-je transmettre le isLogin. de la page de connexion ? Qu'en est-il de la page du livret??
光陰似箭催人老,日月如移越少年。
react-router
transmet les paramètres via une correspondance dynamique dans url
ou query
, ce qui est très clair dans ce document. react-router
傳遞參數(shù)無(wú)非通過(guò)url
里面的動(dòng)態(tài)匹配或者query
來(lái)進(jìn)行傳遞,這個(gè)文檔中都很清楚。
但在這種登錄態(tài)的場(chǎng)景中,更好的做法不是通過(guò)cookie
來(lái)進(jìn)行登錄態(tài)的確定,從而使域名下的任何一個(gè)網(wǎng)頁(yè)都能知道已經(jīng)登錄,而不需要像這樣傳遞state
cookie
pour déterminer l'état de connexion, afin que toute page Web sous le nom de domaine puisse savoir qu'elle a été connectée, sans avoir besoin de le faire. Passez state
comme ceci. ??Deux fa?ons?:
La première?: mettre l'état dans une machine à états via une idée de type redux, et prenez-le comme vous le souhaitez,
La deuxième fa?on?: utiliser le transfert d'historique (saut de route), si vous sautez de la route A à route B, le composant Route B souhaite obtenir les données de la route A. Vous pouvez faire ceci?:
class A extends React.Component{
constructor(){ super(); }
handleClick(){
browserHistory.push({
state:state //傳遞方式1 你需要傳遞的狀態(tài)
query:query //傳遞方式2 顯示在路由路徑當(dāng)中的query串,路由B也可以接收;
})
}
render …………
}
class B extends React.Component{
constructor(){
super();
}
componentWillMount(){
//當(dāng)前傳遞過(guò)來(lái)的狀態(tài)
console.log(this.props.location.state)
}
render…………
}
Imprimez this.props du composant de routage et jetez-y un ?il. Vous y trouverez de nombreuses choses dont vous avez besoin.
Utilisez redux/flux pour stocker le statut de connexion
Et utilisez cookie/LocalStorage/SessionStorage pour stocker les informations de connexion de l'utilisateur,
Sinon, après avoir actualisé la page, le statut n'est toujours pas connecté
Vous pouvez utiliser React-Redux pour stocker les paramètres requis pertinents dans le magasin, puis connecter chaque sous-composant. Les paramètres du magasin peuvent être utilisés comme accessoires
.