reactjs-使用react-rou登录后自动重定向

我想在我的react / react-router / flux应用程序中建立一个Facebook登录名。我在登录事件上注册了一个侦听器,并且希望将用户重定向到'/dashboard'(如果他们已登录)。该怎么办? location.push效果不佳,除非完全重新加载了页面。

Daniel Schmidt asked 2020-02-18T20:37:50Z
7个解决方案
30 votes

反应路由器v3

这就是我要做的

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

反应路由器v4

现在我们可以在React Router v4中使用<Redirect>组件。

渲染<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]

Sajjad Ashraf answered 2020-02-18T20:38:50Z
17 votes

React Router v0.13

可以传递从transitionTo返回的transitionTo实例(或者,如果在React组件内部,则可以从上下文对象获取它),并且包含类似于transitionTo的方法,可以用来过渡到新路线。

Michelle Tilley answered 2020-02-18T20:38:08Z
11 votes

React Router v2

即使问题已经回答,但我认为发布对我有用的解决方案还是很重要的,因为此处未提供任何解决方案。

首先,我在router组件上使用路由器上下文

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

之后,我可以访问LoginForm组件中的router对象

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

PS:使用React-router版本2.6.0

Bruno Henrique answered 2020-02-18T20:39:28Z
3 votes

反应路由器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()

react-router / tree / v3 / docs

Anatoliy Litinskiy answered 2020-02-18T20:40:05Z
3 votes

反应路由器v4.2.0

我正在使用React-16.2.0和React-router-4.2.0

我通过此代码获得解决方案  return <Redirect to='/' />

我的工作代码:

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

我正在关注此文档的登录和注销重定向

我也尝试过return <Redirect to='/' />,但不幸的是,这不适用于我。

MD Ashik answered 2020-02-18T20:40:46Z
1 votes

反应路由器v3

在组件内部导航

当需要在组件内部重定向时,应使用withRouter装饰器。 装饰器使用上下文代替您。

import {withRouter} from 'react-router'

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

export default withRouter(Foo);

withRouter(Component,[选项])

HoC(高阶组件)包装了另一个组件以增强   路由器道具的道具。

withRouterProps = {      ... componentProps,      路由器,      参数,      位置,      路线   }

传递您的组件,它将返回   包装的组件。

您可以显式指定router作为包装器组件的道具   从上下文覆盖路由器对象。

Stanislav Mayorov answered 2020-02-18T20:41:37Z
-10 votes

在您的商店中:

data.router.transitionTo('user');

路由器具有:

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

用户是路由处理程序

Antala Ashik answered 2020-02-18T20:42:10Z
translate from https://stackoverflow.com:/questions/29594720/automatic-redirect-after-login-with-react-router