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

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');
  }
};

反應路由器2的更新

在react-router 2.0中， 您將添加路由器上下文 ：

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路由器結合使用