如果单击帖子链接,则从此开始执行blog.js
class Blog extends Component {
render () {
return (
<div className="Blog">
<ul>
<li><Link
to="/posts" exact>Posts</Link></li>
<li><Link to="/new-post">New Post</Link></li>
</ul>
<Switch>
<Route path="/new-post" render={()=>(<Newpost/>)}/>
<Route path="/posts" component={Posts}/>
<Route path="/" exact component={Posts}/>
<Route render={()=><h1>Not Found</h1>}/>
</Switch>
</div>
);
}
}
当我们在blog.js中调用帖子链接时呈现的posts.js
class Posts extends Component {
componentDidMount(){
console.log("render");
});
}
postselect =(id)=>
{
this.props.history.push('/new-post');
console.log("hello");
console.log("hello");
console.log("hello");
console.log("hello");
this.props.history.push('/posts');
}
render()
{
console.log("posts render");
return(
<div>
<button onClick={this.postselect}>submit</button>
</div>);
}
}
newposts.js(如果调用此路由,则应呈现)
class NewPost extends Component {
componentDidMount(){
console.log("hellonewpost");
}
render () {
console.log("newpost render);
return (
<div className="NewPost">
</div>
);
}
}
我两次在posts.js中调用了history.push。但是新帖子未呈现,就像newpost.js componentdidmount和render方法中指定的控制台日志未执行一样。它直接在posts.js中执行控制台日志...为什么??
任何人都可以解释它。...就像代码如何执行
history.push
。