it-swarm.com.ru

Автоматическое перенаправление после входа в систему с реагировать на маршрутизатор

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

46
Daniel Schmidt

React Router v0.13

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

16
Michelle Tilley

React Router v3

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

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

React Router v4

Теперь мы можем использовать <Redirect>component в React Router 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
Sajjad Ashraf

React Router v2

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

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

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

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

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

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

11
Bruno Henrique

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

реакции-маршрутизатор/дерево/v3/документы

3
Anatoliy Litinskiy

React Router v4.2.0

Я использую React-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='/' /> Но мне не повезло, это не работает для меня.

3
MD Ashik

React Router v3

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

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

import {withRouter} from 'react-router'

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

export default withRouter(Foo);

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

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

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

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

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

0
Stanislav Mayorov