У меня есть следующий переключатель на моем маршрутизаторе
<Switch>
<Route exact path={["/", "/job/:id"]} render={(props) => <Landing {...props} />} />
/* And some other routes in here */
</Switch>
Обычно оба пути '/' и '/ job /: id' отображаются на одной целевой странице, но '/ job /: id' больше похож на компонент, включенный в эту целевую страницу.
В моих требованиях поведение целевой страницы выглядит следующим образом
- При вводе '/' в первый раз будут выполняться вызовы для извлечения данных из бэкэнда и его обновления при посадке в виде списка элементов задания.
- При каждом щелчке по элементу задания элемент задания будет расширяться, и он будет отображать URL-адрес в виде «/ job / 2838728» (что соответствует формату «/ job /: id»), но не будет вызывать какой-либо бэкэнд, несмотря на то, что оба маршрута используют одну и ту же целевую страницу.
- Когда я сворачиваю / закрываю элемент job, он должен возвращать URL-адрес назад к '/', но он больше не должен делать никаких вызовов.
Это код, который я использовал для обновления URL
const updateCatIndex = job => {
if (job) {
const { _id } = job;
history.replace(`/job/${_id}`);
}
}
А вот где мои проблемы ..
- Всякий раз, когда я щелкаю по любому из элементов задания, он не только меняет URL-адрес на формат «/ job /: id», но и снова вызывает серверную часть для получения данных. Я просто хочу обновить URL и больше не звонить.
- Я хочу совершать вызов только по первому символу «/» при входе на страницу ... но теперь, когда я закрываю элемент задания, возвращая URL-адрес обратно в «/», он также будет снова вызывать серверную часть для получения данные.
Так что мои проблемы
- Как сделать так, чтобы обращения к серверной части выполнялись только при первом вводе '/', а не при каждом изменении URL-адреса с '/ job /: id' на '/'?
- Как сделать так, чтобы я изменил URL-адрес с '/' на '/ job /: id', не обновляя и не совершая каких-либо вызовов на серверную часть?
Отчаянно нужна помощь в этом, и я даже не знаю, с чего начать ..