как изменить компонент без рендеринга другого компонента вactjs и Reaction-router-dom

Question

У меня есть трехкомпонентный заголовок, боковая панель и еще один центр.данные выборки центра (все данные-пост).В каждом посте будет кнопка, чтобы увидеть настоящий полный пост.теперь полный пост-компонент будет заменять весь пост-компонент.Я не хочу рендерить все остальные компоненты.Просто хочу сделать полный пост-компонент. Теперь, как я могу это сделать.Мой app.js, содержащий три основных компонента

export default class App extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return (
      <ApolloProvider client = {client} >
        <div >
          <div className="row">
            <SideBar store={store} />
            <Center store={store} />
            <RightSlidePanel store={store}/>
          </div>
        </div>
      </ApolloProvider>
    )
  }
}

center.js, компонент

  render(){

    return (
      <Provider store = {this.store}>
        <div className="center-bar nine columns ">
          <div className="row">
              <CenterHeader />
              <PostContent />
              <RightSide />
          </div>
        </div>
      </Provider>
    )

, теперь все сообщения находятся в postContent компоненте.Теперь будет компонент postdetail, который при нажатии кнопки заменит postContent в этом center компоненте

Answer 1

Вам потребуется маршрут для каждого сообщения, отображаемого с помощью параметров URL.Примечание: идентификатор для рендеринга определенного поста.Когда этот пост достигнут, он также может получить необходимые данные.

  render () {
    return (
      <Switch>
        <Route
          exact
          path={'/posts'}
          render={() => {
            return (
              <BlogSummaryList
                posts={this.state.blogPosts}
              />
            )
          }}
        />
        <Route
          exact
          path={'/posts/:id'}
          component={BlogPost}
        />
    )
  }