反應 - 無法使用context.router重定向頁面

我想構建一個我的react/react-router/flux應用程序。我想重定向用戶，當用戶輸入的祕密鏈接（如管理員頁）反應 - 無法使用context.router重定向頁面

這裏登錄頁面管理員組件：

class App extends React.Component { 
render() { 
if (!adminLogin){ 
this.context.router.transitionTo('/login'); 
} 
return ( 
    <div className="wrapper"> 
     <Navbar /> 
     <SidebarLeft /> 
      <div className="content-wrapper"> 
      {this.props.children} 
      </div> 
     <Footer /> 
    </div> 
);}} 
App.contextTypes = { 
    router: React.PropTypes.func 
}; 
export default App;

但是，我有一個proplem與反應方面

TypeError: Cannot read property 'transitionTo' of undefined 
at App.render (App.js:8:5) 
at [objectObject].ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactCompositeComponent.js:587:34) 
at [object Object].ReactCompositeComponentMixin._renderValidatedComponent (D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactCompositeComponent.js:607:32) 
at [object Object].wrapper [as _renderValidatedComponent] (D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactPerf.js:66:21) 
at [object Object].ReactCompositeComponentMixin.mountComponent (D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactCompositeComponent.js:220:30) 
at [object Object].wrapper [as mountComponent] (D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactPerf.js:66:21) 
at Object.ReactReconciler.mountComponent (D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactReconciler.js:37:35) 
at [object Object].ReactCompositeComponentMixin.mountComponent (D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactCompositeComponent.js:225:34) 
at [object Object].wrapper [as mountComponent] (D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactPerf.js:66:21) 
at D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactServerRendering.js:42:38 
at ReactServerRenderingTransaction.Mixin.perform (D:\web\MVCmodel\library\lib\node_modules\react\lib\Transaction.js:136:20) 
at Object.renderToString (D:\web\MVCmodel\library\lib\node_modules\react\lib\ReactServerRendering.js:40:24) 
at D:\web\MVCmodel\library\lib\server.js:326:27 
at D:\web\MVCmodel\library\lib\node_modules\react-router\lib\match.js:58:5 
at D:\web\MVCmodel\library\lib\node_modules\react-router\lib\useRoutes.js:120:15 
at done (D:\web\MVCmodel\library\lib\node_modules\react-router\lib\AsyncUtils.js:49:19)

我對這個問題沒有任何想法，不知道如何解決它。請幫助我嗎？

來源

2016-05-12 Hoàng Nhật

路由器不是一個函數，它是一個對象。

這

App.contextTypes = { 
    router: React.PropTypes.func 
};

應該

App.contextTypes = { 
    router: React.PropTypes.object 
};

正如你可以在React-Router documentation

看 - 編輯 -

您也可以實現，使用歷史而不是路由器。

App.contextTypes = { 
     history: React.PropTypes.object 
    };

，並使用它像這樣

this.context.history.pushState(null, '/login');

來源

2016-05-12 11:57:32 QoP

我改變了它，但它沒有工作，並警告相同的消息！ :( –

嘗試添加一個構造函數，並檢查第二個參數，這是上下文有一個路由器道具 – QoP

我嘗試添加'構造函數（道具）{超級（道具）;}'，但結果是類似的。知道爲什麼 –

好像你正在做出反應，路由器中使用browserHistory（pushState的API）。我會用它的推送功能，讓路由器過渡到組件：

var Router = require('react-router'); 
Router.browserHistory.push('/login');

或ES6語法：

import {browserHistory} from ('react-router'); 
browserHistory.push('/login');

考慮到這一點

所以，你的完整代碼應更多像這樣：

import React, {PropTypes, Component} from 'react'; 
import {browserHistory} from 'react-router'; 

class App extends Component { 

    render() { 
    if (!adminLogin) { 
     browserHistory.push('/login'); 
    } 
    return (
     <div className="wrapper"> 
     <Navbar /> 
     <SidebarLeft /> 
     <div className="content-wrapper"> 
      {this.props.children} 
     </div> 
     <Footer /> 
     </div> 
    ); 
    } 
} 

export default App;

來源

2016-05-12 15:24:09

反應 - 無法使用context.router重定向頁面

回答

相關問題