[英]react router not working for nested components(transitionTo is invalid)
我的代码中有父孙代依赖项。主要元素是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'))
ensenapp.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
}
然后是FullBlog.js
class FullBlog extends React.Component{
render(){
return(<div>Hello world</div>)
}
}
module.exports={
FullBlog:FullBlog
}
我得到的错误是 但是通过这种方式,我无法导航到任何东西。我是第一次使用React-router,我不知道问题是什么。 谢谢
您应该将withRouter()
Router与withRouter()
高阶函数一起使用。 您传入组件, withRouter
将router
对象添加到组件withRouter
。
import { withRouter } from 'react-router-dom';
// ...
export default withRouter(Author)
然后,您可以调用this.props.router.history.push('/somepath')
而不是调用Router.transitionTo
(我不确定那是什么this.props.router.history.push('/somepath')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.