我在reducers中做了一些狀態返回值爲logged_in，它有一個布爾值。React REDX如何使用react-router重定向到特定頁面

這裏是我的代碼：

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

任何人有同樣的問題？在此先感謝

來源

2015-12-15 Kris MP

確保將歷史文脈添加到您的組件：

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

在反應 - 路線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' 
    }); 
    } 
};

來源

2015-12-15 12:55:17

我相信你想使用pushState(null, '/login')，而不是transitionTo。此外，我會建議做一個高階組件，爲您做這種類型的授權，所以你不必每次都寫這個邏輯。

這裏是我講的高階授權組件的一個例子：https://github.com/SpencerCDixon/Kira/blob/master/client/config/routes.js#L29-L60

編輯我才意識到你arn't使用Redux的路由器。但我會建議使用redux-router或者redux-simple-router結合反應路由器

來源

2015-12-16 17:41:08 spencercdixon

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

回答

更新反應路由器2

相關問題