Как получить доступ к компоненту через URL в React-Router 4, когда компонент изначально не отображается?

Question

Надеюсь, название имеет смысл.

Целевая страница приложения My React состоит из трех компонентов: заголовка, основной области содержимого и списка продуктов внизу. При щелчке по продукту список категорий отображается в полноэкранном режиме как дочерний элемент продукта, а название продукта добавляется к URL-адресу.

Из-за количества продуктов, которые я использую, изначально я отображаю только шесть продуктов из нарезанного массива. Следующие или предыдущие шесть продуктов отображаются при нажатии кнопок, которые изменяют значения среза путем изменения состояния. Когда я получаю доступ к URL-адресу одного из первых шести продуктов, то есть myurl.com/prod1, он успешно маршрутизируется. Однако если я попытаюсь получить доступ к URL-адресу одного из вторых пакетов продуктов, скажем, myurl.com/prod7, он не будет перенаправлен и оставит меня на целевой странице.

Каков будет правильный способ обработки такого рода структуры?

Большое спасибо.

Answer 1

Вы можете сравнить путь к предыдущему маршруту с путем к активному маршруту в методе componentDidUpdate и получить данные, если в URL есть какие-либо изменения.

например;

componentDidUpdate(prevProps) {
    if(prevProps.location.pathname !== this.props.location.pathname){
        fetchData()
    }
}

P.S: Вы должны импортировать с помощью Router hoc из пакетаact-router-dom для доступа к реквизитам маршрутизатора.