Erforderlicher Kontext `router` wurde nicht angegeben. Überprüfen Sie die Render-Methode von `RoutingContext`

Question

Meine App ist ES6 React-Anwendung mit React-Router. Ich möchte Benutzer nach einer kleinen Verzögerung auf eine andere Seite umleiten. Hier ist meine Reaktion Komponente:

import React from 'react' 
import { Navigation } from 'react-router' 

export default class Component extends React.Component { 

    render() { 
     return (
      <div>Component content</div> 
     ) 
    } 

    componentDidMount() { 
     setTimeout(() => { 
      // TODO: redirect to homepage 
      console.log('redirecting...'); 
      this.context.router.transitionTo('homepage'); 
     }, 1000); 
    } 

} 

Component.contextTypes = { 
    router: React.PropTypes.func.isRequired 
} 

Und reagieren-Router Routing-Tabelle:

render(
    <Router> 
     <Route path='/' component={ App }> 
      <IndexRoute component={ Component } /> 
     </Route> 
    </Router> 
, document.getElementById('app-container')); 

Das Problem ist, dass 'Router' Eigenschaft nicht in das Bauteil geleitet wird. Chrome-Konsole Inhalt ist:

Warning: Failed Context Types: Required context `router` was not specified in `Component`. Check the render method of `RoutingContext`. 
redirecting... 
Uncaught TypeError: Cannot read property 'transitionTo' of undefined 

Reagieren Version 0.14.2 ist, reagieren-Router Version 1.0.0-RC4 Wo kann ich Fehler machen?

Answer 1

Ich bin kein Reaktiv-Router-Experte, aber ich hatte das gleiche Problem früher heute. Ich verwende React 0.14.2 und React-Router 1.0 (das kam erst in den letzten Tagen heraus, wenn nicht neuer). Während das Debuggen bemerkte ich, dass die Requisiten auf der React Komponente Geschichte (die neue Art der Navigation - https://github.com/rackt/react-router/blob/master/docs/guides/basics/Histories.md) umfasst

ich auch Typoskript mit bin, aber mein Code sieht wie folgt aus:

import React = require('react'); 
import Header = require('./common/header.tsx'); 

var ReactRouter = require('react-router'); 

interface Props extends React.Props<Home> { 
    history: any 
} 

class Home extends React.Component<Props, {}> { 
    render(): JSX.Element { 
     return (
      <div> 
       <Header.Header MenuItems={[]} /> 
       <div className="jumbotron"> 
        <h1>Utility</h1> 
        <p>Click on one of the options below to get started...</p> 
        {<a className="btn btn-lg" onClick={() => this.props.history.pushState(null, '/remoteaccess') }>Remote Access</a>} 
        {<a className="btn btn-lg" onClick={() => this.props.history.pushState(null, '/bridge') }>Bridge</a>} 
       </div> 
      </div> 
     ); 
    } 
} 

module.exports = Home; 

Answer 2

Ich bin geneigt zu sagen, dass this.context.router nicht mehr existiert. Ich bin auf das gleiche Problem gestoßen und es sieht so aus, als ob wir diese Funktionen unter Verwendung von this.context.history sowie this.context.location implementieren sollen. Wenn etwas funktioniert, werde ich versuchen, diese Antwort zu aktualisieren.

Answer 3

Siehe 1.0.0 upgrade guide und this.props.history mit pushState oder replaceState verwenden. context wird für andere Komponenten verwendet (nicht für Routenkomponenten). Von Upgrade-Anleitung:

// v1.0 
// if you are a route component... 
<Route component={Assignment} /> 

var Assignment = React.createClass({ 
    foo() { 
    this.props.location // contains path information 
    this.props.params // contains params 
    this.props.history.isActive('/pathToAssignment') 
    } 
})