Я начал проект, который по сути построен так:
App.js
-> ListView.js
-> SingleEntryView.js
-> (variable views using react router dom)
-> NavComponent.js to switch between those views
Мои URL: www.my-site.com/entry/<ID>/<view> и www.my-site.com/list
На www.my-site.com/entries есть список всех записей,
на www.my-site.com/entry/<ID>/<view> вы можете увидеть некоторые детали, которые зависят от <view>.
Кроме того, навигация по сути позволяет переключаться между видами. Поэтому для навигации требуется <ID>, например, для переключения. от www.my-site.com/entry/<ID>/details до www.my-site.com/entry/<ID>/history.
Мой подход
... начинается с использования маршрутизатора в компоненте App.js:
<Route exact path='/list/' component={ListView} />
<Route exact path='/entry/:id/:view' component={SingleEntryView} />
Затем в SingleEntryView.js у меня есть доступ к this.props.match.id, который я могу передать NavComponent для создания RouterDom-Links для разных представлений.
Я передаю матч следующим образом:
<NavComponent id={this.props.match.params.id} />
Затем My Navigation использует Router Links для перехода к различным представлениям, например так (используя материал ui):
<BottomNavigationAction
component={Link}
to={`/entries/${this.props.id}/details`}
label="details"
/>
Кроме того, я создал другой маршрут, чтобы решить, какой вид будет отображаться под навигацией, я сделал это следующим образом в SingleEntryView.js:
<Route path={`/entry/:id/detail`} component={DetailView}/>
<Route path={`/entry/:id/history`} component={HistoryView}/>
<Route path={`/entry/:id/foobar`} component={FooBarView}/>
Моя проблема
... означает, что когда я нажимаю на одну из этих ссылок в NavBar, представление полностью перезагружается, включая componentDidMount (все удаленное содержимое перезагружается).
Как я могу предотвратить это? Я думал, что ссылка именно там, чтобы предотвратить это **?
P.S .: Я знаю, что это может быть не самое чистое решение - я новичок в реакции, поэтому, если у вас есть идея получше, дайте мне знать: D
П.П.С .: Я все немного упростила, если где-то есть опечатка: простите, пожалуйста: D