React - context.routerを使用してページをリダイレクトできない

Question

私は自分の反応/反応ルータ/フラックスアプリケーションを構築したかったのです。 私は、ユーザーが（管理者ページなど）秘密のリンクを入力すると、ログインページにユーザーをリダイレクトしたい

ここでは管理コンポーネントである：私はproplemをお持ちの、

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; 

しかし

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) 

コンテキストを反応させます

私はこの問題のアイデアはありませんし、それを修正する方法がわかりません。私を助けてください？

Answer 1

ルータは機能ではなく、オブジェクトです。

あなたはReact-Router documentation

で見ることができるように、この

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

が

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

する必要があります - 編集 -

あなたはまた、歴史を使用していることを達成することができますルータの代わりに。

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

、あなたが反応し、ルータ内browserHistory（pushState API）を使用しているように思え、この

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

Answer 2

のようにそれを使用しています。だから、このことを念頭に置いて、あなたの完全なコードをより次のようになります

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

：私はそれのプッシュ機能を使用して、コンポーネントへのルータの移行聞かせ：

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

またはES6構文でを：

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;