反應路由器不能正常工作的嵌套組件（transitionTo無效）

我在code.The主要元素的父孫子依賴是App.js反應路由器不能正常工作的嵌套組件（transitionTo無效）

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

的expenseapp.js有一個按鈕，通過它我希望再獲得加載頁面

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 
}

的Author.js是這樣

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 
}

再有是F ullBlog.js

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

而且，我得到的錯誤是但通過這一點，我不能夠瀏覽到anything.I正在使用陣營路由器的第一次，我不知道是什麼問題是。謝謝

來源

2017-07-17 Aayushi

如果你重新排列的路徑對其中'/ fullblog'是第一，這是否讓你通過導航？ – enjoylife

不，它甚至沒有。 @enjoylife – Aayushi

哦，您應該將組件導出爲默認設置，因爲看起來您的導入可能會導致問題，請嘗試調試或使用console.log對傳遞給Route的組件進行配置，因爲它看起來不是組件。 – enjoylife

你應該使用反應路由器withRouter()高階函數。你傳入組件並且withRouter爲你的組件道具增加一個router對象。

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

// ... 

export default withRouter(Author)

然後，而不是調用Router.transitionTo（我不知道這就是一個東西），你會打電話this.props.router.history.push('/somepath')

來源

2017-07-17 21:20:43

對我不起作用 – Aayushi

反應路由器不能正常工作的嵌套組件（transitionTo無效）

回答

相關問題