React redux 如何使用 react-router 重定向到特定页面 [英] React redux how to redirect to specific page using react-router

问题描述

我在 reducer 中做了一些状态，它返回一个 logged_in 的值，它有一个布尔值.

这是我的代码:

从 'react' 导入 React从'react-dom'导入{渲染}从反应路由器"导入{路由器，路由，链接}从'react-redux'导入{连接}导出类 NewStock 扩展 React.Component {componentWillMount() {const { 路由器，会话} = this.props;if (session.userSessionData.get('logged_in') == false) {router.transitionTo('/登录');}};使成为() {const { 路由器，会话} = this.propsconst currentRoute = router.location.pathname返回 (<div className="row"><h1>你好世界</h1>

)}}功能选择(状态){返回 {路由器:state.router，flash: state.flash.get('newStock'),新股票:state.newStock，会话:state.session}}导出默认连接(选择)(NewStock)

这个组件在/new路径

我想在每次访问此页面时检查，它会检查 logged_in 状态是 true 还是 false.如果它 false 用户将被重定向到 /login 页面.

 componentWillMount() {const { 路由器，会话} = this.props;if (session.userSessionData.get('logged_in') == false) {router.transitionTo('/登录');}};

但它返回一个错误，内容为:

未捕获的类型错误:router.transitionTo 不是函数

有人遇到同样的问题吗?提前致谢

解决方案

确保将历史上下文添加到您的组件中:

static contextTypes = {位置:PropTypes.object，历史:PropTypes.object}

然后你可以这样做:

componentWillMount() {const { session } = this.props;if (!session.userSessionData.get('logged_in')) {this.context.history.pushState(null, '/login');}};

react-router 2 的更新

在 react-router 2.0 中，您将改为添加路由器上下文:

static contextTypes = {路由器:PropTypes.object}

然后你可以这样做:

componentWillMount() {const { session } = this.props;if (!session.userSessionData.get('logged_in')) {this.context.router.push({路径名:'/登录'});}};

I have made some state in reducers which return a value of logged_in which has a boolean value.

Here is my code:

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link } from 'react-router'
import { connect } from 'react-redux'

export class NewStock extends React.Component {
  componentWillMount() {
    const { router, session } = this.props;
    if (session.userSessionData.get('logged_in') == false) {
      router.transitionTo('/login');
    }
  };

  render() {
    const { router, session } = this.props
    const currentRoute = router.location.pathname
    return (
      <div className="row">
        <h1>Hello World</h1>
      </div>
    )
  }
}

function select(state) {
  return {
    router: state.router,
    flash: state.flash.get('newStock'),
    newStock: state.newStock,
    session: state.session
  }
}

export default connect(select)(NewStock)

This component is on the /new path

I want to check everytime this page is visit, it will check if the logged_in state is true or false. if it false user will be redirect to /login page.

  componentWillMount() {
    const { router, session } = this.props;
    if (session.userSessionData.get('logged_in') == false) {
      router.transitionTo('/login');
    }
  };

But it returns an error that says:

Uncaught TypeError: router.transitionTo is not a function

Anyone has the same problem? thanks in advance

解决方案

Make sure to add the history context to your component:

static contextTypes = {
  location: PropTypes.object,
  history: PropTypes.object
}

Then you can do this:

componentWillMount() {
  const { session } = this.props;
  if (!session.userSessionData.get('logged_in')) {
    this.context.history.pushState(null, '/login');
  }
};

Update for react-router 2

In react-router 2.0, you would add the router context instead:

static contextTypes = {
  router: PropTypes.object
}

And then you can do this:

componentWillMount() {
  const { session } = this.props;
  if (!session.userSessionData.get('logged_in')) {
    this.context.router.push({
      pathname: '/login'
    });
  }
};

这篇关于React redux 如何使用 react-router 重定向到特定页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！