reactjs - rutas - routing en react

Redirección automática después de iniciar sesión con reaccionar-enrutador

Question

Quería construir un inicio de sesión de Facebook en mi aplicación reaccionar / reaccionar-enrutador / flujo . Tengo un oyente registrado en el evento de inicio de sesión y me gustaría redirigir al usuario a ''/dashboard'' si están conectados. ¿Cómo puedo hacer eso? location.push no funcionó muy bien, excepto después de volver a cargar la página por completo.

Answer 1

React Router v3

Navegando dentro de los componentes

Debe usar withRouter decorator cuando sea necesario redirigir dentro de un componente. El decorador usa el contexto en lugar de ti.

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

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

export default withRouter(Foo);

withRouter (Componente, [opciones])

Un HoC (componente de orden superior) que envuelve a otro componente para mejorar sus accesorios con puntales del enrutador.

withRouterProps = {... componentProps, enrutador, params, ubicación, rutas}

Pase su componente y devolverá el componente envuelto.

Puede especificar explícitamente el enrutador como un apoyo al componente contenedor para anular el objeto enrutador del contexto.

Answer 2

React Router v0.13

La instancia del Router devuelta desde Router.create puede pasarse (o, si está dentro de un componente React, puede obtenerla del objeto de contexto ) y contiene métodos como transitionTo que puede usar para realizar la transición a una nueva ruta.

Answer 3

React Router v2

Aunque la pregunta ya está respondida, creo que es relevante publicar la solución que funcionó para mí, ya que no estaba cubierta en ninguna de las soluciones que aquí se ofrecen.

Primero, estoy usando el contexto del enrutador en mi componente LoginForm

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

Después de eso, puedo acceder al objeto del router dentro de mi componente LoginForm

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

PD: trabajando en React-router versión 2.6.0

Answer 4

React Router v3

Navegando fuera de los componentes

crea tu aplicación con un enrutador como este

// 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
)

En algún lugar, como un middleware de Redux o una acción de 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

Answer 5

React Router v3

Esto es lo que hago

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

React Router v4

Ahora podemos usar el componente <Redirect> en React Router v4.

La representación de un <Redirect> navegará a una nueva ubicación. La nueva ubicación anulará la ubicación actual en la pila de historial, al igual que los redireccionamientos del lado del servidor.

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>);
        }
    }
}

Documentación https://reacttraining.com/react-router/web/api/Redirect

Answer 6

React Router v4.2.0

Estoy usando React-16.2.0 y React-router-4.2.0

Y obtengo una solución con este código this.props.history.push("/");

Mi código de trabajo:

    .then(response => response.json())
        .then(data => {
            if(data.status == 200){
                this.props.history.push("/");
                console.log(''Successfully Login'');
          }
        })

Estaba siguiendo este documento redirect-on-login-and-logout

También lo intenté con return <Redirect to=''/'' /> Pero desafortunadamente, esto no funcionaba para mí.

Answer 7

En tu tienda:

data.router.transitionTo(''user'');

Y el enrutador tiene:

"Route name="user" handler={User}"

El usuario es manejador de ruta