Question

我开始学习React Router，并且使用goBack函数遇到了一些问题，该函数位于React Router的history属性中。

我有一条简单的路线，可以渲染一个虚拟帖子，形成JsonPlaceHolder API，并创建一个返回按钮，以执行此功能。

   returnToForwardPageHandler = () =>{
    this.props.history.goBack(); 
}

现在，帖子根据指定的ID动态加载。

 componentDidMount () {
    if(this.props.match.params.id){
        if ( !this.state.loadedPost || (this.state.loadedPost && this.state.loadedPost.id !== this.props.id) ) {
            axios.get( 'https://jsonplaceholder.typicode.com/posts/' + this.props.match.params.id)
                .then( response => {
                    // console.log(response);
                    this.setState( { loadedPost: response.data 
                } );
                } );
            }
        }
    }

但是根据ID的给出方式，我的确得到了不同的结果。

在给定帖子的ID所在的组件中

  postSelectedHandler = (id) => {
    //this.setState({selectedPostId: id});
    this.props.history.push('/' + id)
}

如果我手动设置id的状态，它可以正常工作。但是，如果我使用this.props.history.push（'/'+ id），我必须单击两次按钮（执行returnToForwardPageHandler函数），结果不应该一样，我缺少什么？

Answer 1

我希望这会有所帮助。如果没有，请提供有关您的路线的信息。

postSelectedHandler = (id) => {
    //this.setState({selectedPostId: id});
    this.props.history.push(`/${id}`)
}

React Router goBack函数必须执行两次

1 个答案: