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

Assume a scenario:

User is at "/house" as this:

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

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

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

then both child and parent ponents are visible like this:

So what i want is to show only flat ponent 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="/" ponent={Home} />
    <Route exact path="/account" ponent={Account} />
    <Route path="/gharjagga" ponent={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>}
    />
);

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

Assume a scenario:

User is at "/house" as this:

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

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

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

then both child and parent ponents are visible like this:

So what i want is to show only flat ponent 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="/" ponent={Home} />
    <Route exact path="/account" ponent={Account} />
    <Route path="/gharjagga" ponent={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>}
    />
);

• javascript
• reactjs
• react-router-dom

• You want switch route right? Or Please share you route s code – Hafeez Hamza Commented Nov 10, 2018 at 5:39
• when user clicks any grid he navigates to /house/flat/flatID then what i want to show in this url is only flat details, instead both House and flat Details are showing. – Efrain Sanjay Adhikary Commented Nov 10, 2018 at 5:46

2 Answers 2

You can achieve it different ways

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

<Switch>
  <Route path="/account" ponent={Account} />
  <Route path="/house/flat/:flatId" ponent={FlatComponent}/>
  <Route path="/house" ponent={House} />
  <Route path="/" ponent={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 ponent, and nest the routes inside that ponent

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

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

3. you can check whether the route has flatId and hide the elements, in your House ponent 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>
    )
  }
}

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

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