Réagir-routeur: Comment appeler manuellement le Lien?

Je suis nouveau sur ReactJS et de Réagir-Routeur. J'ai un composant qui reçoit par l'intermédiaire des accessoires <Link/> objet de réagir-routeur. Chaque fois que l'utilisateur clique sur un bouton "suivant" à l'intérieur de ce composant, je veux invoquer <Link/> objet manuellement.

Maintenant, je suis en utilisant refs pour accéder à la la sauvegarde de l'instance et manuellement en cliquant sur le 'a' de la balise que <Link/> génère.

Question: Est-il un moyen pour appeler manuellement le Lien (ex:this.props.next.go)?

C'est le code actuel, j'ai:

//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />

//in Document.js
...
var Document = React.createClass({
   _onClickNext: function() {
      var next = this.refs.next.getDOMNode();
      next.querySelectorAll('a').item(0).click(); //this sounds like hack to me
   },
   render: function() {
      return (
         ...
         <div ref="next">{this.props.next} <img src="rightArrow.png" onClick={this._onClickNext}/></div>
         ...
      );
   }
});
...

C'est le code que je voudrais avoir:

//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
<Document next={sampleLink} />

//in Document.js
...
var Document = React.createClass({
   render: function() {
      return (
         ...
         <div onClick={this.props.next.go}>{this.props.next.label} <img src="rightArrow.png" /> </div>
         ...
      );
   }
});
...

InformationsquelleAutor Alan Souza | 2015-03-24

175

Réagir Routeur v4 - Composant de Redirection (mise à jour 2017/04/15)

La v4 est recommandé pour permettre à votre méthode de rendu pour attraper une redirection. L'utilisation de l'état ou les accessoires afin de déterminer si la redirection composant doit être indiqué (ce qui déclenche alors une redirection).
```
import { Redirect } from 'react-router';

//... your class implementation

handleOnClick = () => {
  //some action...
  //then redirect
  this.setState({redirect: true});
}

render() {
  if (this.state.redirect) {
    return <Redirect push to="/sample" />;
  }

  return <button onClick={this.handleOnClick} type="button">Button</button>;
}
```
Référence: https://reacttraining.com/react-router/web/api/Redirect

Réagir Routeur v4 - Référence Routeur Contexte

Vous pouvez également profiter de Router's contexte qui est exposée à l'Réagissent composant.
```
static contextTypes = {
  router: PropTypes.shape({
    history: PropTypes.shape({
      push: PropTypes.func.isRequired,
      replace: PropTypes.func.isRequired
    }).isRequired,
    staticContext: PropTypes.object
  }).isRequired
};

handleOnClick = () => {
  this.context.router.push('/sample');
}
```
C'est de cette façon <Redirect /> fonctionne sous le capot.

Référence: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Redirect.js#L46,L60

Réagir Routeur v4 - Externe de Mutation de l'Histoire de l'Objet

Si vous avez encore besoin de faire quelque chose de similaire à la v2 de l'application, vous pouvez créer une copie de BrowserRouter alors exposer le history comme exportable constante. Ci-dessous est un exemple de base, mais vous pouvez le composer pour l'injecter avec des accessoires si nécessaire. On note des mises en garde avec des cycles de vie, mais elle doit toujours rerender le Routeur, tout comme dans la v2. Cela peut être utile pour les redirections après une demande d'API à partir d'une action de la fonction.
```
//browser router file...
import createHistory from 'history/createBrowserHistory';
import { Router } from 'react-router';

export const history = createHistory();

export default class BrowserRouter extends Component {
  render() {
    return <Router history={history} children={this.props.children} />
  }
}

//your main file...
import BrowserRouter from './relative/path/to/BrowserRouter';
import { render } from 'react-dom';

render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>
);

//some file... where you don't have React instance references
import { history } from './relative/path/to/BrowserRouter';

history.push('/sample');
```
Dernière BrowserRouter pour prolonger: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/BrowserRouter.js

Réagir Routeur v2

Pousser un nouvel état de la browserHistory exemple:
```
import {browserHistory} from 'react-router';
//...
browserHistory.push('/sample');
```
Référence: https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md
- hashHistory.push('/échantillon"); si vous utilisez hashHistory au lieu de browserHistory
- ceci est particulièrement utile dans le matériau-bibliothèque d'interface utilisateur que l'utilisation de containerElement={<Lien="/" />} n'est pas toujours invoquer le lien
- Je crois browserHistory va loin dans réagissent-routeur v4
- J'ai mis à jour ce afin de refléter v4 changements. J'ai récemment migré et l'utilisation v4 pour le web et de réagir natif. Laissez-moi savoir si vous voyez des problèmes.
- Remarque avec l'option de redirection, vous devez spécifier push (ie <Rediriger push />). Par défaut, il va faire un remplacement qui n'est pas du tout le même que manuellement en invoquant un Lien
- Je voulais juste ajouter un "actif" css pour le Lien, je ne veux pas de revoir l'ensemble de la chose. 🙁
- vous pouvez utiliser <NavLink /> au lieu de <Link /> github.com/ReactTraining/react-router/blob/master/packages/...
- Redirection ne fonctionne pas pour moi, mais aw04 solution avec withRouter est plus simple, et de travail
- Après la redirection, ce.état.rediriger rester vrai et au lieu de l'affichage d'un bouton, il est nul composant de redirection ne pas rendre les DOM.
InformationsquelleAutor Matt Lo
77

Réagir Routeur 4 comprend un withRouter HOC qui vous donne accès à la history de l'objet via this.props:
```
import React, {Component} from 'react'
import {withRouter} from 'react-router-dom'

class Foo extends Component {
  constructor(props) {
    super(props)

    this.goHome = this.goHome.bind(this)
  }

  goHome() {
    this.props.history.push('/')
  }

  render() {
    <div className="foo">
      <button onClick={this.goHome} />
    </div>
  }
}

export default withRouter(Foo)
```
- Cela a fonctionné pour moi et il semble que le plus simple solution.
- C'est la meilleure solution. Je n'ai pas nderstand pourquoi il a si peu de votes.
- Merci! C'est génial.
- oui, vous pouvez cliquez sur le lien à quelques reprises et navigateur ne fonctionne pas. vous aurez besoin de cliquer sur le navigateur de retour pour un peu de temps pour vraiment revenir
InformationsquelleAutor aw04
5

https://github.com/rackt/react-router/blob/bf89168acb30b6dc9b0244360bcbac5081cf6b38/examples/transitions/app.js#L50

ou vous pouvez même essayer d'exécution onClick ce (plus violents de la solution):
```
window.location.assign("/sample");
```
- Comme les lignes de code à modifier, votre réponse sera mieux si vous copiez les détails et expliquer votre réponse ici. Aussi, assign n'est pas une propriété, c'est une fonction.
- (Mais vous avez encore juste un lien vers une ligne spécifique d'un fichier). Veuillez inclure la suggestion spécifique dans votre réponse, et pas seulement un lien.
- Merci pour votre réponse @grechut. Cependant, je veux m'assurer que le Document ne sait rien à propos de routeur à tous. Le comportement que j'attends est: "Si l'utilisateur clique sur la flèche de droite, d'invoquer la fonction". La fonction suivante peut être un lien ou pas.
- J'ai un couple de pages traitées en dehors de Réagir (écrans de connexion avec FB et Google redirige) donc j'ai besoin de la valeur liquidative de ces pages depuis "browserHistory.push('/home');" seulement changé l'URL, il a été impossible d'acheminer les pages. Je vous remercie.
- Cela permettrait de recharger la page @grechut, pas un comportement souhaité pour une application à réagir routeur.
- Comme beaucoup ont déjà dit, ce n'est pas vraiment travailler avec le Routeur. Il va rafraîchir la page entière.
InformationsquelleAutor grechut

Ok, je pense que j'ai été capable de trouver une solution pour que.

Maintenant, au lieu de les envoyer <Link/> comme prop de Document, j'ai envoyer <NextLink/> qui est un wrapper personnalisé pour réagir-routeur Lien. En faisant cela, je suis en mesure d'avoir la flèche vers la droite dans le cadre de la structure des liens en évitant d'avoir le code de routage à l'intérieur de l'objet Document.

La mise à jour du code se présente comme suit:

//in NextLink.js
var React = require('react');
var Right = require('./Right');

var NextLink = React.createClass({
    propTypes: {
        link: React.PropTypes.node.isRequired
    },

    contextTypes: {
        transitionTo: React.PropTypes.func.isRequired
    },

    _onClickRight: function() {
        this.context.transitionTo(this.props.link.props.to);
    },

    render: function() {
        return (
            <div>
                {this.props.link}
                <Right onClick={this._onClickRight} />
            </div>  
        );
    }
});

module.exports = NextLink;

...
//in MasterPage.js
var sampleLink = <Link to="/sample">Go To Sample</Link>
var nextLink = <NextLink link={sampleLink} />
<Document next={nextLink} />

//in Document.js
...
var Document = React.createClass({
   render: function() {
      return (
         ...
         <div>{this.props.next}</div>
         ...
      );
   }
});
...

P. S: Si vous utilisez la dernière version de réagir-routeur, vous devrez utiliser les this.context.router.transitionTo au lieu de this.context.transitionTo. Ce code fonctionnera très bien pour réagir-routeur version 0.12.X.

InformationsquelleAutor Alan Souza

2

Réagir Routeur 4

Vous pouvez facilement appeler la méthode push via contexte v4:

this.context.router.push(this.props.exitPath);

où le contexte est:
```
static contextTypes = {
    router: React.PropTypes.object,
};
```
- À l'aide de BrowserRouter, mon des composants d'un objet de contexte ne contient pas de router objet. Suis-je en train de faire quelque chose de mal?
- Êtes-vous définir le contexte dans le composant (le deuxième bloc ci-dessus)?
- Merci pour carillon! finalement, cela a fonctionné pour moi: router: React.PropTypes.object.isRequired. Je ne sais pas pourquoi il ne fonctionne pas sans le isRequired clé. Aussi, <Link> semble être en mesure d'obtenir la history contexte, mais je n'arrivais pas à le reproduire.
- Intéressant - si vous mettez une codepen je pourrais vous aider à déboguer si vous êtes toujours bloqué
- Il semble que vous pouvez utiliser this.props.history.push() à Réagir Routeur v4. Je n'ai découvert cela en inspectant les accessoires qui Réagissent Routeur passe bien. Il semble fonctionner mais je ne suis pas sûr si c'est une bonne idée.
InformationsquelleAutor Chris

-1

encore une fois c'est JS 🙂 cela fonctionne encore ....

var linkToClick = document.getElementById('something');
linkToClick.click();

<Link id="something" to={/somewhaere}> the link </Link>

InformationsquelleAutor Taggart Jensen

Vous devez vous connecter pour publier un commentaire.

Réagir Routeur v4 - Composant de Redirection (mise à jour 2017/04/15)

Réagir Routeur v4 - Référence Routeur Contexte

Réagir Routeur v4 - Externe de Mutation de l'Histoire de l'Objet

Réagir Routeur v2

Réagir Routeur 4