react-router 2的更新

Question

我在reducers中创建了一些状态，返回值logged_in，它有一个布尔值。

这是我的代码：

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)

此组件位于/new路径

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

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

但它返回一个错误，上面写着：

Uncaught TypeError: router.transitionTo is not a function

任何人都有同样的问题？提前谢谢

Answer 1

确保将历史记录上下文添加到您的组件：

static contextTypes = {
  location: PropTypes.object,
  history: 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中，you would add the router context instead：

static contextTypes = {
  router: PropTypes.object
}

然后你可以这样做：

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

Answer 2

我相信你想使用pushState(null, '/login')而不是transitionTo。此外，我建议您制作一个更高级别的组件，为您执行此类授权，这样您就不必每次都写出componentDidMount逻辑。

以下是我所讨论的高阶授权组件的示例：https://github.com/SpencerCDixon/Kira/blob/master/client/config/routes.js#L29-L60

编辑我刚刚意识到你没有使用redux-router。但我建议使用redux-router或redux-simple-router与react router

结合使用

React redux如何使用react-router重定向到特定页面

2 个答案:

react-router 2的更新