组件不渲染

Question

如果我们点击帖子链接，blog.js 的执行将从这里开始。

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

博客.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 中调用帖子链接时呈现）：

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

在您的 New-Post 组件中：

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

Answer 2

您在一个函数中同时执行 2 个history.pushes。

请注意 - 一旦您的点击处理函数完成执行，javascript 引擎将执行 history.push。到函数执行完成时，历史对象已被修改（第二次）以具有 /posts，因此永远不会呈现 /new-post

一般来说，最好将history.push 作为函数中的最后一行代码。

编辑（根据评论）

这里是a demo。转到Home.js 并单击按钮并观察console.logs。