web-dev-qa-db-fra.com

Redirection automatique après la connexion avec react-router

Je voulais créer un identifiant Facebook dans mon react/react-router/flux application . J'ai un auditeur enregistré sur l'événement de connexion et je voudrais rediriger l'utilisateur vers '/dashboard' s'ils sont connectés. Comment puis-je faire cela? location.Push ne fonctionnait pas très bien, sauf après le rechargement complet de la page.

reactjsreactjs-fluxreact-router
46
Daniel Schmidt

React Router v0.13

L’instance Routerrenvoyée de Router.create peut être transmise (ou, si elle se trouve dans un composant React, vous pouvez l’obtenir de l’objet de contexte ) et contient des méthodes comme transitionTo que vous pouvez utiliser pour passer à un nouvel itinéraire.

16
Michelle Tilley

React Router v3

C'est ce que je fais

var Router = require('react-router');
Router.browserHistory.Push('/somepath');

React Router v4

Nous pouvons maintenant utiliser le composant <Redirect> dans React Router v4.

Le rendu d'un <Redirect> permet de naviguer vers un nouvel emplacement. Le nouvel emplacement remplacera l'emplacement actuel dans la pile d'historique, comme les redirections côté serveur.

import React, { Component } from 'react';
import { Redirect } from 'react-router';
export default class LoginComponent extends Component {
    render(){
        if(this.state.isLoggedIn === true){
            return (<Redirect to="/your/redirect/page" />);
        }else{
            return (<div>Login Please</div>);
        }
    }
}

Documentation https://reacttraining.com/react-router/web/api/Redirect

29
Sajjad Ashraf

React Router v2

Même si la question a déjà reçu une réponse, je pense qu'il est pertinent d'afficher la solution qui a fonctionné pour moi, car elle ne figurait dans aucune des solutions présentées ici.

Tout d'abord, j'utilise le contexte du routeur sur mon composant LoginForm

LoginForm.contextTypes = {
  router: React.PropTypes.object
};

Après cela, je peux accéder à l'objet router à l'intérieur de mon composant LoginForm

handleLogin() {
  this.context.router.Push('/anotherroute');
}

PS: travaille sur la version 2.6.0 de React-router

11
Bruno Henrique

React Router v3

Navigation en dehors des composants

créez votre application avec un routeur comme celui-ci

// Your main file that renders a <Router>:
import { Router, browserHistory } from 'react-router'
import routes from './app/routes'

render(
  <Router history={browserHistory} routes={routes} />,
  mountNode
)

Quelque part comme un middleware Redux ou une action Flux:

import { browserHistory } from 'react-router'

// Go to /some/path.
browserHistory.Push('/some/path')

// Go back to previous location.
browserHistory.goBack()

react-router/tree/v3/docs

3
Anatoliy Litinskiy

React Router v3

Navigation dans les composants

Vous devez utiliser withRouter decorator lorsqu'il est nécessaire de rediriger à l'intérieur d'un composant. Le décorateur utilise le contexte à la place de vous.

import {withRouter} from 'react-router'

fucntion Foo(props) {
    props.router.Push('/users/16');
}

export default withRouter(Foo);

withRouter (Composant, [options])

Un HoC (composant d'ordre supérieur) qui encapsule un autre composant pour améliorer ses accessoires avec des accessoires de routeur.

withRouterProps = { ... composantProps, routeur, params, emplacement, itinéraires }

Passez votre composant et il retournera le composant enveloppé.

Vous pouvez spécifier explicitement routeur en tant que prop du composant wrapper à remplacer l'objet routeur du contexte.

0
Stanislav Mayorov