谁能说出为什么不渲染?

问题描述 投票:1回答:2

如果单击帖子链接,则从此开始执行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中执行控制台日志...为什么??

任何人都可以解释它。...就像代码如何执行

reactjs react-redux react-router react-hooks react-state
2个回答
0
投票
您不能在同一功能中两次发布推送历史记录。我不太确定您要做什么,但我假设您想执行以下操作:

0
投票
您正在一项功能中同时执行2个history.push
© www.soinside.com 2019 - 2024. All rights reserved.