组件不渲染如果我们点击posts链接，

Question

blog.js的执行就从这里开始。

我在posts.js中调用了两次history.push，但新的post没有像newpost.js中指定的控制台日志一样进行渲染。ComponentDidMount和render方法没有执行，但它正在执行posts.js中的控制台日志。

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>
);
}
}

Posts.js(当我们在blog.js中调用Posts链接时呈现(:

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>
);
}
}

Answer 1

您不能在同一函数中发布两次推送历史记录。我不太确定你想做什么，但我假设你想做这样的事情：

postselect =(id)=>
{
this.props.history.push('/new-post');
}

在您的新帖子组件中：

componentDidMount{
console.log("hello");
console.log("hello");
console.log("hello");
console.log("hello");
this.props.history.push('/posts');

Answer 2

您在一个函数中同时执行两个history.push。

请注意-单击处理程序函数执行完毕后，javascript引擎将执行history.push。当功能执行完成时，历史对象被修改(第二次(为具有/posts，因此/new-post永远不会被呈现为

通常，最好将history.push作为函数中的最后一行代码。

编辑(基于评论(

这是一个演示。转到Home.js，单击按钮并观察console.log。