Вложенный маршрутизатор React: скрыть родительский компонент при отображении вложенного дочернего компонента
Будучи новичком в reactJS, я хочу знать, как скрыть родительский компонент, когда я перехожу к URL-адресу дочернего компонента.
Предположим сценарий:
Пользователь находится в "/ house" следующим образом:
<Route path = "/house" component = {House} />
когда пользователь щелкает сетку дома, он переходит к «/ house / flat /: flatID». Компонент Inside House
<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>}
/>
);
когда пользователь щелкает любую сетку, он переходит к / house / flat / flatID, тогда то, что я хочу показать в этом URL-адресе, - это только плоские детали, вместо этого отображаются и House, и Flat Details.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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>
но я хочу передать реквизиты из компонента House в Flat Component, и спасибо за это! очень близко к решениям
Вам нужно будет хранить и извлекать данные от общего предка. См. Поднятие состояния вверх для получения дополнительной информации @EfrainSanjayAdhikary
они оба находятся внутри app.js! не слишком ли тяжело загружать все в app.js и делиться ими в Flat и House?
Нет, накладные расходы незначительны. Вы также можете вложить подмаршруты "/" и "/flat/:flatId" в "/house", если хотите управлять state более чистым образом. Основные шаги / логика в любом случае одинаковы @EfrainSanjayAdhikary
Вы можете добиться этого разными способами
- определять маршруты в родительском компоненте, я думаю, что это лучший вариант.
<Switch>
<Route path = "/account" component = {Account} />
<Route path = "/house/flat/:flatId" component = {FlatComponent}/>
<Route path = "/house" component = {House} />
<Route path = "/" component = {Home} />
</Switch>
Примечание: вместо использования exact упорядочивайте маршруты на основе приоритета, что приведет к перенаправлению маршрута на следующий совпадающий маршрут, если во введенном маршруте есть опечатка.
- Вы можете сделать House отдельным компонентом маршрута и вложить маршруты внутри этого компонента.
// 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>
)
}
}
- вы можете проверить, есть ли в маршруте
flatId, и скрыть элементы, в вашем компоненте House вы можете проверитьthis.props.match.params.flatId, еслиflatIdустановлен, вы можете скрыть этот компонент House.
// 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>
)
}
}
хорошо, я понял то, что вы пытаетесь передать! но когда компонент дома визуализируется, я получаю все данные, и когда пользователь щелкает любую сетку (дом), данные этого дома должны быть переданы в плоский компонент, вы понимаете мой сценарий?
поэтому я не могу получить данные из родительского компонента! и мне нужно передать реквизит в квартиру из дома
Вы можете использовать второй вариант для этого
это лучшие варианты? нет никаких решений для маршрутизации только к дочернему компоненту вместо обоих родителей и дочернего компонента
Попробуйте новый второй вариант, который был бы намного лучше, тоже лучшая практика, я забыл добавить это раньше
Я думаю, что в соответствии с документацией по реактивному маршрутизатору, всякий раз, когда вы хотите использовать match в компоненте Route, вам следует использовать match.path, а если вы хотите использовать его в компоненте Link, используйте match.url. Это потому, что match.path предоставит вам путь, например /:paramId/..., а match.url предоставит вам полный URL-адрес, например localhost:3000/some-id.
Спасибо, спасибо, спасибо, спасибо, спасибо, спасибо, спасибо, спасибо, спасибо, спасибо, спасибо, спасибо <3 <3 <3: D
Вы хотите сменить маршрут, верно? Или поделитесь кодом маршрута