Я хотел создать логин facebook в своем приложении action/response-router/flux. У меня есть слушатель, зарегистрированный в событии входа, и хотел бы перенаправить пользователя в "/dashboard", если они вошли в систему. Как я могу это сделать? Location.push не работает очень хорошо, кроме как после полной перезагрузки страницы.
Автоматическое перенаправление после входа в систему с помощью ретранслятора
Ответ 1
React Router v0.13
Экземпляр Router
возвращенный из Router.create
, может быть передан (или, если внутри компонента React, вы можете его получить от объект контекста) и содержит методы like transitionTo
, которые вы можете использовать для перехода на новый маршрут.
Ответ 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()
Ответ 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}"
Пользователь - обработчик маршрута