Javascript Girl
  1. Javascript Girl
  3. Naviguer par programme en utilisant le routeur réactif
Intereting Posts
Requête ajax sous-domaine croisé refusée même lorsque document.domain est correctement configuré Support de navigateur Promise.defer () JavaScript ne fonctionne-t-il pas dans Android Webview? Pourquoi document.ready est utilisé dans jQuery Javascript automatise l'impression avec google chrome Créer un jeton aléatoire dans Javascript en fonction des détails de l'utilisateur JQuery slider, Autoplay SWF lorsqu'il est glissé sur Faites glisser et déposez pour réorganiser les listes HTML Array to Object First and Last Détruire 'this' avec Javascript? Comment puis-je définir un événement incomplet sur un CommandButton dans PrimeFaces avec une fermeture? Quelle est la meilleure façon de créer un espace de noms JavaScript? Dans Javascript, pourquoi les objets Date ont-ils les méthodes valueOf et getTime s'ils font de même? D3.js moyenne mobile avec les valeurs de données précédentes et suivantes Comment puis-je cacher la barre d'adresse dans une boîte de dialogue modal?

Naviguer par programme en utilisant le routeur réactif

Je développe une application dans laquelle je vérifie si l'utilisateur n'est pas loggedin Je dois afficher le formulaire de connexion, sinon envoyer une action qui modifierait l'itinéraire et charger d'autres composants. loggedin mon code: 

  render() { if (isLoggedIn) { // dispatch an action to change the route } // return login component <Login /> }

Comment puis-je atteindre ceci car je ne peux pas changer les états dans la fonction de rendu.

Étant donné que vous utilisez le react-router v4

Utilisez votre composant avec withRouter et utilisez withRouter partir des accessoires pour modifier l'itinéraire 

 import {withRouter} from 'react-router'; class App extends React.Component { ... render() { if (isLoggedIn) { // dispatch an action to change the route this.props.history.push('/home'); } // return login component return <Login /> } } export default withRouter(App);

Note importante

Si vous utilisez withRouter pour éviter que les mises à jour ne soient bloquées par shouldComponentUpdate , il est important que withRouter enveloppe le composant qui implémente shouldComponentUpdate . Par exemple, lors de l'utilisation de Redux:

// Cela contourne shouldComponentUpdate 

 withRouter(connect(...)(MyComponent))

// Cela ne fonctionne pas 

 connect(...)(withRouter(MyComponent))

Avec le react-router v2 or react-router v3 , vous pouvez utiliser le context pour modifier dynamiquement l'itinéraire comme 

 class App extends React.Component { ... render() { if (isLoggedIn) { // dispatch an action to change the route this.context.router.push('/home'); } // return login component return <Login /> } } App.contextTypes = { router: React.PropTypes.object.isRequired } export default App;

Ou utiliser 

 import { browserHistory } from 'react-router'; browserHistory.push('/some/path');

En version réactive-routeur 4: 

 import React from 'react' import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom' const Example = () => ( if (isLoggedIn) { <OtherComponent /> } else { <Router> <Redirect push to="/login" /> <Route path="/login" component={Login}/> </Router> } ) const Login = () => ( <h1>Form Components</h1> ... ) export default Example;