Кто-нибудь может сказать, почему это не рендеринг?

Question

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 отображается при вызове ссылки на сообщения в блоге. 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>
        );
    }
}

Я вызываю history.pu sh в сообщениях. js дважды. но new-post не рендерится, как журналы консоли, указанные в newpost. js componentdidmount и метод render не выполняются. он непосредственно выполняет консольный журнал в сообщениях. js ... почему ????

кто-нибудь может это объяснить .... например, как код выполняет

Answer 1

Вы выполняете 2 history.push одновременно в одной функции.

Обратите внимание, что - движок javascript создаст history.pu sh, как только ваша функция обработчика щелчков завершит свое выполнение. К тому времени, когда выполнение функции завершается, объект истории изменяется (во 2-й раз), чтобы иметь /posts и, следовательно, /new-post никогда не обрабатывается

В целом, лучше иметь history.push в качестве последнего строка кода в функции.

РЕДАКТИРОВАТЬ (на основе комментария)

Вот демо . Go до Home.js, нажмите кнопку и просмотрите console.logs.

Answer 2

Вы не можете опубликовать историю pu sh дважды в одной и той же функции. Я не совсем уверен, что вы пытаетесь сделать, но я предполагаю, что вы хотите сделать что-то вроде этого:

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