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

user_6302920 0
Viewed 6790

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

enter image description here

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: enter image description here

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>}
    />
);
react-router-dom reactjs javascript
2 Answers

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

  1. 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>
    )
  }
}
  1. 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>
    )
  }
}
user_42134920

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>
user_55663550
Related