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

Question

Being a beginner in reactJS, I want to know how to hide parent component when i route to child component URL

Assume a scenario:

User is at "/house" as this:

<Route path="/house" component={House} />

when user clicks a house grid he navigates to "/house/flat/:flatID". Inside House component

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

then both child and parent components are visible like this:

So what i want is to show only flat component when user navigates to "/house/flat:FlatId". Please suggest me anything that helps ! Any links to article so that i can learn and achieve such functionality.

Code:

App.js

<Switch>
    <Route exact path="/" component={Home} />
    <Route exact path="/account" component={Account} />
    <Route path="/gharjagga" component={GharJagga} />
</Switch>

House.js

onGharGridClick= id => {
    <Redirect to={`${this.props.match.url}/flat/${id}`} />;
};

return (
    <Route
        path={`${this.props.match.url}/flat/:fkatId`}
        render={() => <div>Ghar Each</div>}
    />
);

Answer 1

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>
    )
  }
}

Answer 2

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>