如何更改组件而不在reactjs和react-router-dom中呈现其他组件

Question

我有三个部分Header，Sidebar和另一个是center。 中心获取数据（所有数据后）。 在每个帖子中，都有一个按钮可以查看当前的完整帖子。 现在，整个职位组成部分将替换所有职位组成部分。 我不想渲染所有其他组件。 只想渲染完整的文章组件。现在我该怎么做。 我的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将在那里，当单击按钮时它将替换此center组件中的postContent 。

Answer 1

您需要为每个通过url参数呈现的帖子指定一条路线。 注意：id用于呈现特定的帖子。 到达该职位后，它也可以获取其所需的数据。

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