Не уверены в моем подходе к определенной части в приложении React Redux?

Question

Я работаю над мини-приложением React Redux, где изначально загружаю список статей.Нажатие на каждую из этих статей должно отобразить содержимое этой конкретной статьи и детали на странице.

Моя текущая архитектура приложения выглядит следующим образом:

App.js

class App extends Component {
    render() {
        return (
            <div className="App">
                <AppHeader></AppHeader>
                <PageContent></PageContent>
            </div>
        );
    }
}

PageContentContainer.js

const mapStateToProps = state => ({
    posts: state.simpleReducer.posts
});

const mapDispatchToProps = dispatch => {

    return {
        frontPagePosts: () => {
            dispatch(actions.frontPageItems())
        }
    }
};


class PageContentContainer extends Component{

    componentDidMount(){
        this.props.frontPagePosts();
    }

    render(){
        return(
            <div>
                <main>
                    <FrontPageComponent posts={this.props.posts}/>
                </main>
            </div>
        )
    }
}

FrontPageComponent - это просто компонент рендеринга представления без какой-либо логики.

class FrontPageComponent extends Component{
    render(){

        return(
            <div>
                <div className="container frontPageContainer">
                    {this.props.posts.map((val, idx) => {
                        return(
                            <div key={idx} className='row frontPageContent'>
                                <div className="col-12 col-md-12 col-sm-12 col-lg-12">
                                    <h2>
                                        <a href={'/' + val.slug}>
                                            {val.title}
                                        </a>
                                    </h2>
                                </div>
                                <div className="col-12 col-md-12 col-sm-12 col-lg-12">{val.excerpt}</div>
                            </div>
                        )
                    })}
                </div>
            </div>
        )
    }
} 

Мой текущий мыслительный процесс состоит в представлении другого компонента представления для просмотра отдельной статьи <ReadArticleComponent/>.Каждый раз, когда пользователь нажимает на отдельную статью, он изменяет логическое значение состояния с именем showArticle в магазине.Исходя из этого, он будет отображать оба компонента соответственно.Так, например, логика в моем PageContentContainer будет выглядеть так:

componentDidMount(){
    //ajax call to the backend

    if(!this.props.showArticle){
     this.props.frontPagePosts();
    }else{
      this.props.showArticleContent()
    } 
}

.........

render(){
   ......

   {!this.props.showArticle ? <FrontPageComponent.../> 
     : <ReadArticleComponent/>
   }
}

Но как бы я справился со случаем, когда пользователь нажимает кнопку «Назад» и возвращается на страницу со всеми статьями.Правильный ли мой подход или я должен использовать React Router в своем приложении?