Автоматическое перенаправление после входа в систему с react-router

Я хотел создать вход в Facebook в мой react / react-маршрутизатор / поток приложение. У меня есть слушатель, зарегистрированный в событии входа в систему, и хотел бы перенаправить пользователя на '/dashboard' если они вошли в систему. Как я могу это сделать? location.push работал не очень хорошо, за исключением полной перезагрузки страницы.

46
react-router reactjs reactjs-flux

7 ответов

реагирует маршрутизатор v0.13

на Router экземпляр вернулся из Router.create может передаваться (или, если внутри компонента React, вы можете получить его из контекст объекта), и содержит методы как transitionTo что можно использовать для перехода на новый маршрут.

16

реагировать маршрутизатор v3

вот что я делаю

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

реагировать маршрутизатор v4

теперь мы можем использовать <Redirect> компонент в маршрутизаторе React V4.

визуализация <Redirect> перейти на новое место. Новое расположение переопределит текущее местоположение в стеке истории, например перенаправление на стороне сервера.

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

документация https://reacttraining.com/react-router/web/api/Redirect

29

реагировать маршрутизатор v2

хотя на вопрос уже дан ответ, я думаю, что важно опубликовать решение, которое сработало для меня, поскольку оно не было охвачено ни одним из решений, приведенных здесь.

во-первых, я использую контекст маршрутизатора на моем LoginForm компонент

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

после этого я могу получить доступ к router объект внутри моей LoginForm компонент

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

PS: работа над версией React-router 2.6.0

11

реагировать маршрутизатор v3

навигация вне компонентов

создать приложение с маршрутизатором, как это

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

где - то как промежуточное по Redux или действие 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

реагирует маршрутизатор v4.2.0

Я использую реагировать-16.2.0 & React-router-4.2.0

и я получаю решение этим кодом this.props.history.push("/");

мой рабочий код: 

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

Я следил за этим документом redirect-on-login-and-logout

Я также пытался return <Redirect to='/' /> но к несчастью, это не работает для меня.

1

реагировать маршрутизатор v3

навигация внутри компоненты

вы должны использовать withRouter декоратор, когда необходимо перенаправить внутри компонента. Декоратор использует контекст вместо вас.

import {withRouter} from 'react-router'

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

export default withRouter(Foo);

withRouter(компонент, [опции])

HoC (компонент более высокого порядка), который обертывает другой компонент для повышения его реквизит с реквизитом маршрутизатора.

withRouterProps = { ...componentProps, обращать в бегство, params, местоположение, маршруты }

Pass в вашем компоненте и он возвратит завернутый компонент.

вы можете точно указать роутер как опору для компонента обертке переопределите объект маршрутизатора из контекста.

0

в магазине:

data.router.transitionTo('user');

и маршрутизатор:

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

пользователь является обработчиком маршрута

-9