Par programme de naviguer à l'aide de réagir routeur

Réagir-Routeur 4.0.0+ Réponse

En 4.0 et ci-dessus, l'utilisation de l'histoire comme un accessoire de votre composant.

class Example extends React.Component {
   //use `this.props.history.push('/some/path')` here
};

REMARQUE: cette.accessoires de jeu.histoire de ne pas exister dans le cas où votre composant n'a pas été rendue par <Route>. Vous devez utiliser <Route path="..." component={YourComponent}/> de l'avoir.accessoires de jeu.l'histoire en YourComponent

Réagir-Routeur 3.0.0+ Réponse

En 3.0 et au-dessus, utiliser le routeur comme un accessoire de votre composant.

class Example extends React.Component {
   //use `this.props.router.push('/some/path')` here
};

Réagir-Routeur 2.4.0+ Réponse

2.4 et au-dessus, une plus forte composante de l'ordre pour obtenir le routeur comme un accessoire de votre composant.

import { withRouter } from 'react-router';

class Example extends React.Component {
   //use `this.props.router.push('/some/path')` here
};

//Export the decorated class
var DecoratedExample = withRouter(Example);

//PropTypes
Example.propTypes = {
  router: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  }).isRequired
};

Réagir-Routeur 2.0.0+ Réponse

Cette version est compatible avec 1.x, donc il n'y a pas besoin d'un Guide de Mise à niveau. Tout simplement en passant par les exemples doivent être assez bon.

Cela dit, si vous souhaitez basculer vers le nouveau modèle, il y a un browserHistory module à l'intérieur du routeur que vous pouvez accéder à la

import { browserHistory } from 'react-router'

Maintenant, vous avez accès à l'historique de votre navigateur, de sorte que vous pouvez faire des choses comme push, remplacer, etc... Comme:

browserHistory.push('/some/path')

Davantage de lecture:
Histoires et
La Navigation

---

Réagir-Routeur 1.x.x Réponse

Je n'entrerai pas dans les détails de la mise à niveau. Vous pouvez lire à ce sujet dans le Guide De Mise À Niveau

Le principal changement sur la question ici est le changement de la Navigation mixin à l'Histoire. Maintenant, c'est à l'aide du navigateur historyAPI de changer d'itinéraire nous allons donc utiliser pushState() à partir de maintenant.

Voici un exemple en utilisant Mixin:

var Example = React.createClass({
  mixins: [ History ],
  navigateToHelpPage () {
    this.history.pushState(null, `/help`);
  }
})

Noter que cette History vient de rackt/histoire projet. Pas de Réagir-Routeur lui-même.

Si vous ne souhaitez pas utiliser le Mixin pour une raison quelconque (peut-être à cause de l'ES6 classe), alors vous pouvez accéder à l'historique que vous obtenez à partir du routeur de this.props.history. Il sera accessible uniquement pour les composants rendus par votre Routeur. Donc, si vous voulez l'utiliser dans n'importe quel enfant de composants, il doit être transmis sous forme d'un attribut via props.

Vous pouvez en savoir plus sur la nouvelle version à leur 1.0.x de la documentation

Ici est une page d'aide spécifiquement sur la navigation à l'extérieur de votre composante

Il recommande de saisir une référence history = createHistory() et de l'appel de replaceState sur que.

Réagir-Routeur 0.13.x Réponse

Je suis dans le même problème et trouver la solution avec la Navigation mixin qui vient avec réagissent-routeur.

Voici comment je l'ai fait

import React from 'react';
import {Navigation} from 'react-router';

let Authentication = React.createClass({
  mixins: [Navigation],

  handleClick(e) {
    e.preventDefault();

    this.transitionTo('/');
  },

  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
});

J'ai été en mesure d'appeler transitionTo() sans avoir besoin d'accéder .context

Ou vous pouvez essayer la fantaisie ES6 class

import React from 'react';

export default class Authentication extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();

    this.context.router.transitionTo('/');
  }

  render(){
    return (<div onClick={this.handleClick}>Click me!</div>);
  }
}

Authentication.contextTypes = {
  router: React.PropTypes.func.isRequired
};

Réagir-Routeur-Redux

Remarque: si vous utilisez Redux, il y a un autre projet appelé
Réagir-Routeur-Redux qui vous donne
redux liaisons pour ReactRouter, à l'aide un peu la même approche que
Réagir-Redux ne

Réagir-Routeur-Redux a quelques méthodes disponibles qui permettent la simple navigation à partir de l'intérieur de l'action de créateurs. Ceux-ci peuvent être particulièrement utiles pour les personnes qui ont de l'architecture existante de Réagir Natif, et qu'ils souhaitent utiliser les mêmes modèles de Réagir Web avec un minimum de standard de frais généraux.

Explorer les méthodes suivantes:

• push(location)
• replace(location)
• go(number)
• goBack()
• goForward()

Voici un exemple d'utilisation, avec Redux-Thunk:

./actioncreators.js

import { goBack } from 'react-router-redux'

export const onBackPress = () => (dispatch) => dispatch(goBack())

./viewcomponent.js

<button
  disabled={submitting}
  className="cancel_button"
  onClick={(e) => {
    e.preventDefault()
    this.props.onBackPress()
  }}
>
  CANCEL
</button>

OriginalL'auteur Felipe Skinner

Voici comment faire cela avec réagissent-routeur v2.0.0 avec ES6. react-router a éloigné de mixin.

import React from 'react';

export default class MyComponent extends React.Component {
  navigateToPage = () => {
    this.context.router.push('/my-route')
  };

  render() {
    return (
      <button onClick={this.navigateToPage}>Go!</button>
    );
  }
}

MyComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

OriginalL'auteur Alex Miller

Pour celui-ci, qui n'a pas de contrôle sur le côté serveur et de ce fait est à l'aide de hachage routeur v2:

Placez votre l'histoire en fichier séparé (par ex. app_history.js ES6):

import { useRouterHistory } from 'react-router'
import { createHashHistory } from 'history'
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });

export default appHistory;

Et de l'utiliser partout!

Votre point d'entrée pour réagir-routeur (app.js ES6):

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Redirect } from 'react-router'
import appHistory from './app_history'
...
const render((
  <Router history={appHistory}>
  ...
  </Router>
), document.querySelector('[data-role="app"]'));

Votre navigation à l'intérieur d'une composante (ES6):

import appHistory from '../app_history'
...
ajaxLogin('/login', (err, data) => {
  if (err) {
    console.error(err); //login failed
  } else {
    //logged in
    appHistory.replace('/dashboard'); //or .push() if you don't need .replace()
  }
})

OriginalL'auteur Alexey Volodko

Réagir Routeur V4

tl:dr;

if (navigate) {
  return <Redirect to="/" push={true} />
}

La simple et déclarative réponse est que vous devez utiliser <Redirect to={URL} push={boolean} /> en combinaison avec setState()

push: boolean - lorsque la valeur est true, la redirection de pousser une nouvelle entrée dans l'histoire au lieu de remplacer l'actuel.

---

import { Redirect } from 'react-router'

class FooBar extends React.Component {
  state = {
    navigate: false
  }

  render() {
    const { navigate } = this.state

    //here is the important part
    if (navigate) {
      return <Redirect to="/" push={true} />
    }
   //^^^^^^^^^^^^^^^^^^^^^^^

    return (
      <div>
        <button onClick={() => this.setState({ navigate: true })}>
          Home
        </button>
      </div>
    )
  }
}

Exemple complet ici.
Lire plus ici.

PS. L'exemple utilise ES7+ Propriété des Initialiseurs à l'initialisation de l'état. Regarder ici ainsi, si vous êtes intéressé.

OriginalL'auteur Lyubomir

À faire de la navigation de la programmation, vous avez besoin de pousser un nouveau histoire à la accessoires.l'histoire dans votre component, donc quelque chose comme cela peut faire le travail pour vous:

//using ES6
import React from 'react';

class App extends React.Component {

  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(e) {
    e.preventDefault()
    /* Look at here, you can add it here */
    this.props.history.push('/redirected');
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          Redirect!!!
        </button>
      </div>
    )
  }
}

export default App;

OriginalL'auteur Alireza

Veuillez trouver ci-dessous code du travail:
Comme discuté dans cet article, il est très simple de naviguer à l'aide de réagir Routeur:

class Register extends React.Component {
  state = {
    toDashboard: false,
  }
  handleSubmit = (user) => {
    saveUser(user)
      .then(() => this.setState(() => ({
        toDashboard: true
      })))
  }
  render() {
    if (this.state.toDashboard === true) {
      return <Redirect to='/dashboard' />
    }

    return (
      <div>
        <h1>Register</h1>
        <Form onSubmit={this.handleSubmit} />
      </div>
    )
  }
}

<Rediriger/> est

Composable ✅ Déclarative ✅ événement utilisateur -> modification de l'état -> nouveau rendu ✅

Enregistreuse est en cours de rendu par Réagir Routeur, notre code pourrait ressembler à ceci

class Register extends React.Component {
  handleSubmit = (user) => {
    saveUser(user).then(() =>
      this.props.history.push('/dashboard')
    ))
  }
  render() {
    return (
      <div>
        <h1>Register</h1>
        <Form onSubmit={this.handleSubmit} />
      </div>
    )
  }
}

en ajoutant withRouter, il devrait ressembler à ceci

import {
  withRouter
} from 'react-router-dom'

class Register extends React.Component {
  handleSubmit = (user) => {
    saveUser(user).then(() =>
      this.props.history.push('/dashboard')
    ))
  }
  render() {
    return (
      <div>
        <h1>Register</h1>
        <Form onSubmit={this.handleSubmit} />
      </div>
    )
  }
}

export default withRouter(Register)

Il y a deux façons de programmation pour naviguer à Réagir de Routeur et de l'histoire.push. Que vous utilisez est la plupart du temps à vous et à votre cas d'utilisation spécifiques, bien que j'essaie de faveur de Redirection.

OriginalL'auteur kiran malvi

À utiliser withRouter avec une classe de composant, essayez quelque chose comme ce ci-dessous.
N'oubliez pas de modifier l'instruction d'exportation à utiliser withRouter:

import { withRouter } from 'react-router-dom'

class YourClass extends React.Component {
  yourFunction = () => {
    doSomeAsyncAction(() =>
      this.props.history.push('/other_location')
    )
  }

  render() {
    return (
      <div>
        <Form onSubmit={ this.yourFunction } />
      </div>
    )
  }
}

export default withRouter(YourClass);

OriginalL'auteur Janos

avec Réagissent-Routeur v4 sur l'horizon, il y a maintenant une nouvelle manière de faire.

import { MemoryRouter, BrowserRouter } from 'react-router';
const navigator = global && global.navigator && global.navigator.userAgent;
const hasWindow = typeof window !== 'undefined';
const isBrowser = typeof navigator !== 'undefined' && navigator.indexOf('Node.js') === -1;
const Router = isBrowser ? BrowserRouter : MemoryRouter;
<Router location="/page-to-go-to"/>

réagir-lego est un exemple d'application qui montre comment utiliser/mise à jour de réagir-routeur et il comprend des exemples de tests fonctionnels qui naviguer dans l'application.

OriginalL'auteur peter.mouland

Avec le courant de Réagir version (15.3), this.props.history.push('/location'); a fonctionné pour moi, mais il a montré l'avertissement suivant:

navigateur.js:49 Avertissement: [réagir-routeur] props.history et
context.history sont obsolètes. Veuillez utiliser context.router.

et je l'ai résolu en utilisant context.router comme ceci:

import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.backPressed = this.backPressed.bind(this);
}
backPressed() {
this.context.router.push('/back-location');
}
...
}
MyComponent.contextTypes = {
router: React.PropTypes.object.isRequired
};
export default MyComponent;

OriginalL'auteur José Antonio Postigo

Réagir-Routeur V4

si vous utilisez la version 4 vous pouvez ensuite utiliser ma bibliothèque (Shameless plug) où il vous suffit de l'expédition d'une action et tout fonctionne, tout simplement!

dispatch(navigateTo("/aboutUs"));

https://www.npmjs.com/package/trippler

OriginalL'auteur Garry Taylor

Si arriver à paire RR4 w/redux par réagir-routeur-redux, utiliser le routage d'action des créateurs de react-router-redux est une option.

import { push, replace, ... } from 'react-router-redux'
class WrappedComponent extends React.Component {
handleRedirect(url, replaceState = true) { 
replaceState 
? this.props.dispatch(replace(url)) 
: this.props.dispatch(push(url)) 
}
render() { ... }
}
export default connect(null)(WrappedComponent)

Si l'utilisation redux thunk/saga pour gérer async flux, l'importation de l'action ci-dessus créateurs dans redux actions et le crochet pour réagir composants à l'aide de mapDispatchToProps peut-être mieux.

OriginalL'auteur Xlee

Peut-être pas la meilleure solution, mais il fait le travail:

import { Link } from 'react-router-dom';
//create functional component Post
export default Post = () => (
<div className="component post">
<button className="button delete-post" onClick={() => {
//... delete post
//then redirect, without page reload, by triggering a hidden Link
document.querySelector('.trigger.go-home').click();
}}>Delete Post</button>
<Link to="/" className="trigger go-home hidden"></Link>
</div>
);

Fondamentalement, à une logique liée à une action (dans ce cas, un poste de suppression) finiront par appeler un déclencheur pour la redirection. Ce n'est pas l'idéal parce que vous allez ajouter un nœud DOM 'trigger' à votre balisage, de sorte que vous pouvez facilement appeler en cas de besoin. Aussi, vous pourrez interagir directement avec les DOM, qui, dans une Réagir composant peut ne pas être désirée.

Encore, ce type de redirection n'est pas nécessaire que souvent. Donc un ou deux de plus, des liens cachés dans votre composant de balisage ne serait pas mal que bien, surtout si vous leur donner des noms significatifs.

OriginalL'auteur neatsu

Il suffit juste d'utiliser this.props.history.push('/where/to/go');

OriginalL'auteur Oka Prinarjaya