routeur ne fonctionne pas réagi pour les composants imbriqués (transitionTo est invalide)

Question

J'ai parent dépendance petit-enfant dans mon élément principal code.The est app.js

import React from 'react' 
import ReactDOM from 'react-dom' 
import {ExpenseApp} from './expense-app.js' 
import {Switch, BrowserRouter, Route} from 'react-router-dom' 
import {FullBlog} from './FullBlog.js' 

class App extends React.Component{ 
    render(){ 
     return(
      <BrowserRouter> 
       <Route path='/' component={ExpenseApp}/> 
       <Route path='/fullblog' component={FullBlog}/> 
      </BrowserRouter> 
      ) 
    } 
} 

ReactDOM.render(<ExpenseApp data={data}/>, document.getElementById('container')) 

Le expenseapp.js a un bouton à travers lequel je veux une autre page pour obtenir chargé

import React from 'react'; 
import ReactDom from 'react-dom' ; 
import $ from 'jquery' ; 
//import data from '../data.json'; 
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'; 
import {FullBlog} from './FullBlog.js'; 
import {Author} from './Author.js' 


class ExpenseApp extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state={ 
     data:this.props.data, 
     list:[] 
    } 
    } 
    render(){ 
    var data=this.state.data; 
    var list=this.state.list; 
    var len= Object.keys(data).length; 
    for(var i=0;i<len;i++){ 
     //console.log(data[i]); 
     list.push(<Author key={i} i={i} data={data[i]}/>); 
    } 
    return(
     <div> 
     {list} 
     </div> 
    ) 
    } 
} 

module.exports={ 
    ExpenseApp:ExpenseApp 
} 

le Author.js est comme ce

import React from 'react'; 
import ReactDom from 'react-dom' ; 
import $ from 'jquery' ; 
//import data from '../data.json'; 
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'; 
import {FullBlog} from './FullBlog.js' 


class Author extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state={ 
     data:this.props.data, 
     load:false, 
     content:'', 
     Author:'', 
     Book:'' 
    } 
    this.loadBlog=this.loadBlog.bind(this); 
    } 

    loadBlog(i){ 
    var that=this; 
    var data=this.state.data[i]; 
    that.setState({ 
    // load:true, 
     Content:this.props.data.Content, 

    }) 
    that.context.Router.transitionTo(null,'/fullblog'); 
    } 
    render(){ 
    if(this.state.load===false){  
     return(

     <div onClick={this.loadBlog} > 
      <div>{this.props.data.Author}</div> 
      <div>{this.props.data.Book}</div> 
     </div> 

     ) 
     }//else{ 
     // return(<Link to="/fullblog"><FullBlog data={this.state.data}/></Link>) 
     // } 
    } 
} 

Author.contextTypes = { 
    Router: function contextType() { 
    return React.PropTypes.func.isRequired; 
    } 
}; 
module.exports={ 
    Author:Author 
} 

Et puis il y a F ullBlog.js

class FullBlog extends React.Component{ 
render(){ 
return(<div>Hello world</div>) 
} 
} 
module.exports={ 
    FullBlog:FullBlog 
} 

Et l'erreur que je reçois est Mais grâce à cela, je ne suis pas en mesure de naviguer à l'aide anything.I suis-routeur React pour la première fois et je ne sais pas ce que la question est. Merci

Answer 1

Vous devez utiliser la fonction d'ordre supérieur des routeurs de réaction withRouter(). Vous transmettez votre composant et withRouter ajoute un objet router aux composants de votre composant.

import { withRouter } from 'react-router-dom'; 

// ... 

export default withRouter(Author) 

Ensuite, au lieu d'appeler Router.transitionTo (je ne suis pas sûr des thats une chose) que vous appelleriez this.props.router.history.push('/somepath')