使用反应路由器登录后自动重定向

我想在我的react/react-router/flux应用程序中建立一个Facebook登录名。我在登录事件上注册了一个侦听器，并希望将用户重定向到'/dashboard'如果他们已登录。我该怎么做？ location.push工作得不是很好，除非完全重新加载页面。

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

反应路由器 v0.13

从 Router.create 返回的 Router 实例可以传递（或者，如果在 React 组件中，您可以从上下文对象中获取它），并且包含可用于转换为新路由的transitionTo等方法。

反应路由器 v2

即使这个问题已经得到回答，我认为发布对我有用的解决方案是相关的，因为这里给出的任何解决方案都没有涵盖它。

首先，我在LoginForm组件上使用路由器上下文

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

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

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

PS：在反应路由器版本2.6.0上工作

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

反应路由器 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');
  }
})

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

我也尝试过return <Redirect to='/' />但不幸的是，这对我不起作用。

使用钩子反应路由器 v5

这些步骤适用于授权重定向。但也可用于登录/注销重定向。

<Redirect/>接受to prop 作为字符串或对象。我们可以使用钩子在登录/注销后利用该对象传递重定向路径。

获取调用<Redirect/>的 url 的路径名 useLocation() const {pathname} = useLocation()
在<Redirect/>的to道具中传递以下对象：
<Redirect to={{pathname:'/login',state: {referrer: pathname}}/>
在登录组件中，使用useLocation()挂钩访问路由状态变量，并在成功登录后使用 useHistory() 挂钩进行重定向.
const history = useHistory(); const location = useLocation();
const login() => { // After login success const {state: {referrer}} = location; history.push(referrer) };

在此处查看官方文档

反应路由器 v3

在组件内部导航

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

import {withRouter} from 'react-router'
fucntion Foo(props) {
    props.router.push('/users/16');
}
export default withRouter(Foo);

带路由器（组件，[选项]）
一个 HoC（高阶组件），它包装另一个组件以增强它的道具与路由器道具。
与路由器道具 = { ...组件道具，路由器参数，位置路线 }
传入您的组件，它将返回包装的组件。
您可以显式指定路由器作为包装器组件的道具从上下文中覆盖路由器对象。

在您的商店中：

data.router.transitionTo('user');

路由器具有：

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

用户是路由处理程序

在组件外部导航

相关内容

最新更新

热门标签：