Подтвердить что ты не робот

Автоматическое перенаправление после входа в систему с помощью ретранслятора

Я хотел создать логин facebook в своем приложении action/response-router/flux. У меня есть слушатель, зарегистрированный в событии входа, и хотел бы перенаправить пользователя в "/dashboard", если они вошли в систему. Как я могу это сделать? Location.push не работает очень хорошо, кроме как после полной перезагрузки страницы.

4b9b3361

Ответ 2

React Router v3

Это то, что я делаю

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

React Router v4

Теперь мы можем использовать компонент <Redirect> в React Router v4.

Отображение a <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

Ответ 3

React Router v2

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

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

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

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

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

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

Ответ 4

React Router v3

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

создайте приложение с помощью Router, как это

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

response-router/tree/v3/docs

Ответ 5

React Router v3

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

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

import {withRouter} from 'react-router'

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

export default withRouter(Foo);

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

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

withRouterProps = {    ... componentProps,    маршрутизатор,    Титулы,    место нахождения,    маршруты }

Передайте свой компонент, и он вернет завернутый компонент.

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

Ответ 6

В вашем магазине:

data.router.transitionTo('user');

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

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

Пользователь - обработчик маршрута