React-Context.router kann nicht zur Umleitung der Seite

Question

verwendet werden. Ich wollte eine my react/react-router/flux-Anwendung erstellen. Ich möchte Benutzer umleiten zur Login-Seite, wenn der Benutzer

Hier den geheimen Link (wie Admin-Seite) eingeben admin Komponente:

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; 

Aber ich proplem haben mit Kontext reagieren

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) 

Ich habe keine Ideen für dieses Problem und weiß nicht, wie ich es beheben kann. Bitte helfen Sie mir?

Answer 1

Router ist keine Funktion, es ist ein Objekt.

diese

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

sollte

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

Wie Sie in der React-Router documentation

sehen - Herausgegeben -

Sie können auch erreichen, dass die Geschichte mit anstelle von Router.

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

und es verwenden, wie diese

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

Answer 2

Es scheint, wie Sie die browserHistory (pushstate API) innerhalb reagieren-Router verwenden. Ich würde die Push-Funktion davon verwenden und den Router Übergang zu Ihrer Komponente lassen:

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

oder in ES6 Syntax:

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

So mit dem im Verstand, Ihr vollständiger Code soll wie folgt aussehen :

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;