Nested React Router : hide parent component on showing nested child component

The solution is to raise "/house/flat/:flatId" to the same level as "/house".

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/account" component={Account} />
  <Route path="/house/flat/:flatId" render={() => <div>Each Flat details</div>}/>
  <Route path="/house" component={House} />
</Switch>

You can achieve it different ways

1. define routes in the parent component, I think this is the best option.

<Switch>
  <Route path="/account" component={Account} />
  <Route path="/house/flat/:flatId" component={FlatComponent}/>
  <Route path="/house" component={House} />
  <Route path="/" component={Home} />
</Switch>

Note: instead of using exact, order your routes based on priority, that will make the route to redirect to next matching route if any typo in the route entered

2. You can make House as separate route component, and nest the routes inside that component

// Routes
<Switch>
  <Route path="/account" component={Account} />
  <Route path="/house" component={House} />
  <Route path="/" component={Home} />
</Switch>

// House component
class House extends React. Components {
  render() {
    return (
      <Switch>
        <Route path="/house/flat/:flatId" render={() => <div>Each Flat details</div>} />}/>
        <Route path="/house" component={HouseGridComponent} />
      </Switch>
    )
  }
}

3. you can check whether the route has flatId and hide the elements, in your House component you can check this.props.match.params.flatId, if the flatId is set you can hide that House Component.

// House Component

class House extends React. Components {
  render() {
    return (
      <div>
        {
          !this.props.match.params.flatId?
            <h1>House Component</h1>:
            null
        } 

        <Route path={`${this.props.match.url}/flat/:flatId`} render={() => <div>Each Flat details</div>} />
      </div>
    )
  }
}