Nested React Router: скрыть родительский компонент при отображении вложенного дочернего компонента

Question

Будучи новичком в ReactionJS, я хочу знать, как скрыть родительский компонент при маршрутизации на URL дочернего компонента

Допустим, сценарий:

Пользователь находится в "/ house", как это:

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

когда пользователь щелкает сетку домов, он переходит к «/ house / flat /: flatID». Внутри дома компонент

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

тогда и дочерний, и родительский компоненты видны так:

Так что я хочу показать только плоский компонент, когда пользователь переходит к «/ house / flat: FlatId». Пожалуйста, предложите мне что-нибудь, что поможет! Любые ссылки на статью, чтобы я мог учиться и достичь такой функциональности.

Код:

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

Вы можете достичь этого разными способами

1. определить маршруты в родительском компоненте, я думаю, что это лучший вариант.

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

Примечание: вместо использования exact, заказывайте маршруты на основе приоритета, что приведет к перенаправлению маршрута к следующему подходящему маршруту, если будет введена какая-либо опечатка в маршруте

2. Вы можете сделать Дом отдельным компонентом маршрута и вкладывать маршруты внутри этого компонента

// 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. вы можете проверить, есть ли у маршрута flatId и скрыть элементы, в вашем компоненте Дома вы можете проверить this.props.match.params.flatId, если установлен flatId, вы можете скрыть этот компонент дома.

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

Решение состоит в том, чтобы поднять "/house/flat/:flatId" до того же уровня, что и "/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>