आवश्यक संदर्भ 'राउटर` निर्दिष्ट नहीं किया गया था। `रूटिंग कॉन्टेक्स्ट`

Question

की रेंडर विधि की जांच करें मेरा ऐप प्रतिक्रिया-राउटर के साथ ES6 प्रतिक्रिया अनुप्रयोग है। मैं थोड़ी देर के बाद उपयोगकर्ता को एक अलग पृष्ठ पर रीडायरेक्ट करना चाहता हूं।

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 
} 

और प्रतिक्रिया रूटर अनुमार्गण तालिका: यहाँ मेरी प्रतिक्रिया घटक है

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

मुद्दा यह है कि 'रूटर' संपत्ति घटक में पारित नहीं किया जाता है। क्रोम कंसोल की सामग्री है:

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 

प्रतिक्रिया संस्करण 0.14.2 है, प्रतिक्रिया रूटर संस्करण 1.0.0-RC4 मैं कहां गलती कर रहा है?

Answer 1

मैं किसी भी माध्यम से प्रतिक्रिया-राउटर विशेषज्ञ नहीं हूं, लेकिन आज मेरे पास एक ही समस्या थी। मैं रिएक्ट 0.14.2 और रिएक्ट-राउटर 1.0 का उपयोग कर रहा हूं (यह हाल ही में पिछले कुछ दिनों में आया था, अगर हाल ही में नहीं)। डिबगिंग जबकि मैंने देखा है कि प्रतिक्रिया घटक पर रंगमंच की सामग्री के इतिहास (नेविगेशन की नई शैली - https://github.com/rackt/react-router/blob/master/docs/guides/basics/Histories.md) भी शामिल है

मैं भी टाइपप्रति उपयोग कर रहा हूँ, लेकिन मेरे कोड ऐसा दिखाई देता है:

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

मैं कहने के इच्छुक है कि this.context.router अब मौजूद नहीं है। मैंने एक ही समस्या में भाग लिया है और ऐसा लगता है कि हमें this.context.history के साथ-साथ this.context.location का उपयोग करके इन सुविधाओं को लागू करना होगा। अगर मुझे कुछ काम मिल रहा है, तो मैं इस प्रतिक्रिया को अपडेट करने का प्रयास करूंगा।

Answer 3

1.0.0 upgrade guide देखें और this.props.historypushState या replaceState के साथ उपयोग करें। context अन्य घटकों के लिए उपयोग किया जाता है (मार्ग घटकों नहीं)। अपग्रेड मार्गदर्शिका से:

// 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') 
    } 
})