Question

我想在我的 react / react-router / flux 应用程序中构建一个Facebook登录。我在登录事件中注册了一个监听器，并且如果他们已登录，则希望将用户重定向到'/dashboard'。我该怎么做？ location.push除非完全重新加载页面后才能正常工作。

Answer 1

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 2

React Router v0.13

可以传递Router实例returned from Router.create（或者，如果在React组件中，您可以从the context object获取），并包含您like transitionTo的方法可用于转换到新路线。

Answer 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

Answer 4

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

Answer 5

React Router v4.2.0

我正在使用 React-16.2.0 ＆amp; 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 6

React router v5 使用钩子

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

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

使用调用 <Redirect/> 的位置获取 url 的路径名 useLocation()
const {pathname} = useLocation()
在 to 的 <Redirect/> 属性中传入以下对象：
<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

Answer 7

React Router v3

在组件内导航

如果需要在组件内重定向，则应使用withRouter装饰器。装饰者使用上下文代替你。

import {withRouter} from 'react-router'

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

export default withRouter(Foo);

withRouter（Component，[options]）

包装另一个组件以增强的HoC（高阶组件）   它带有路由器道具的道具。

withRouterProps = {      ... componentProps，      路由器，      参数，可以      地点，      路线   }

传递你的组件，它将返回   包裹的组件。

您可以明确指定路由器作为包装器组件的支柱   从上下文覆盖路由器对象。

Answer 8

在您的商店中：

data.router.transitionTo('user');

路由器有：

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

用户是路由处理程序

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

8 个答案:

在组件外导航