Ngữ cảnh bắt buộc `bộ định tuyến` không được chỉ định. Kiểm tra phương thức render của `RoutingContext`

Question

Ứng dụng của tôi là ứng dụng React ES6 với bộ phản ứng-bộ định tuyến. Tôi muốn chuyển hướng người dùng đến một trang khác sau một sự chậm trễ nhỏ. Đây là thành phần Phản ứng của tôi:

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 
} 

Và phản ứng-router định tuyến bảng:

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

Vấn đề là 'router tài sản không được chuyển vào thành phần. nội dung Chrome console là:

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 

Phản ứng phiên bản 0.14.2, phiên bản phản ứng-router là 1.0.0-rc4 Nơi nào tôi phạm sai lầm?

Answer 1

Tôi không phải là chuyên gia phản ứng-bộ định tuyến bằng bất kỳ phương tiện nào, nhưng hôm nay tôi đã gặp phải vấn đề tương tự. Tôi đang sử dụng React 0.14.2 và React-Router 1.0 (điều này chỉ xuất hiện trong vài ngày gần đây, nếu không phải gần đây hơn). Trong khi gỡ lỗi tôi nhận thấy rằng các đạo cụ trên thành phần Phản ứng bao gồm lịch sử (phong cách mới hàng hải - https://github.com/rackt/react-router/blob/master/docs/guides/basics/Histories.md)

Tôi cũng đang sử dụng nguyên cảo, nhưng mã của tôi trông giống như sau:

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

Tôi có xu hướng nói rằng this.context.router không tồn tại nữa. Tôi đã gặp phải vấn đề tương tự và có vẻ như chúng tôi phải triển khai các tính năng này bằng cách sử dụng this.context.history cũng như this.context.location. Nếu tôi nhận được một cái gì đó làm việc, tôi sẽ cố gắng cập nhật phản ứng này.

Answer 3

Xem 1.0.0 upgrade guide và sử dụng this.props.history với pushState hoặc replaceState. context được sử dụng cho các thành phần khác (không phải thành phần tuyến đường). Từ hướng dẫn nâng cấp:

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