反应路由器不适用于嵌套组件（transitionTo无效）

Question

I have parent grandchild dependency in my code.The main element is 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'))

The expenseapp.js has a button through which I want another page to get loaded

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
}

the Author.js is like this

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
}

And then there is FullBlog.js

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

And the error that I am getting is But through this, I am not able to navigate to anything.I am using React-router for the first time and I dont know what the issue is. Thanks

Answer 1

You should use react routers withRouter() higher order function. You pass in your component and withRouter adds a router object to your component props.

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

// ...

export default withRouter(Author)

Then instead of calling Router.transitionTo (I'm not sure thats a thing) you would call this.props.router.history.push('/somepath')