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

Question

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

Answer 1

React Router v0.13

可用于转换到新路由的 Router 实例 returned from Router.create can be passed around (or, if inside a React component, you can get it from the context object), and contains methods like transitionTo。

Answer 2

在您的商店中：

data.router.transitionTo('user');

路由器有：

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

用户是路由处理者

Answer 3

React Router v3

这就是我所做的

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

React Router 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

Answer 4

React Router v2

尽管问题已经得到解答，但我认为它与 post 对我有用的解决方案相关，因为这里给出的任何解决方案都没有涵盖它。

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

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

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

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

PS：正在处理 React-router 版本 2.6.0

Answer 5

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

react-router/tree/v3/docs

Answer 6

React Router v3

在组件内部导航

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

import {withRouter} from 'react-router'

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

export default withRouter(Foo);

withRouter(Component, [options])

A HoC (higher-order component) that wraps another component to enhance its props with router props.

withRouterProps = { ...componentProps, router, params, location, routes }

Pass in your component and it will return the wrapped component.

You can explicit specify router as a prop to the wrapper component to override the router object from context.

Answer 7

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='/' /> 但不幸的是，这对我不起作用。

Answer 8

使用钩子的 React 路由器 v5

这些步骤用于授权重定向。但也可用于 login/logout 重定向。

<Redirect/> 接受 to 属性作为字符串或对象。 login/logout 使用 hooks 后，我们可以利用该对象轻松传递重定向路径。

从调用 <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)
};

查看官方文档here

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

Automatic redirect after login with react-router

reactjs

reactjs-flux

react-router

在组件外部导航