Реализация роутинга в React-приложении

Подскажите как лучше реализовать архитектуру для данного приложения:

Сайт состоит из страниц, переход между которыми осуществляется посредством основного меню. Каждая страница состоит из панелей (подстраниц), переход между которыми осуществляется посредством вспомогательногом меню.

Общую структуру можно представить в таком виде:

[ОСНОВНОЕ МЕНЮ][ СТРАНИЦА                                      ]
[ * элемент 1 ][[ВСПОМОГАТЕЛЬНОЕ МЕНЮ: * элемент 1  * элемент 2]
[ * элемент 2 ][[ПАНЕЛЬ=======================================]]
[ * элемент 3 ][[=============================================]]

Хочется, чтобы пользователь мог попасть в соответствующую панель сразу из адресной строки, а не посредством длительной анимации.

Формат адресной строки: [страница]/[панель]/.../[панель]?[параметр]&[параметр]...

Например:

services/search?query=test&count=11

Это же нормальная практика в сайтостроении? :)

Как максимально корректно и расширяемо можно реализовать такой подход?

Я выбираю между 2 вариантами:

Вариант 1:

в главном компоненте, который содержит все дочерние компоненты (меню, страницы и т.д.) парсится адресная строка на [routes] (['services', 'search']) и [route_params] ({query: 'test', count: 11}) далее эти данные передаются дочерним компонентам, те своим дочерним (с отрезанием на каждом шаге от [routes] и т.п.)

и каждый компонент уже в зависимости от того, какие данные получил отрисовывает что требуется

Вариант 2:

в главном компоненте парсится адресная строка и заносится в хранилище, которое отслеживается Redux/MobX или иной библиотекой контроля состояний все компоненты, которым нужны такие данные получают их не через props, а из глобального хранилища, а Redux/Mobx дёргает перерисовку при изменении адреса.

Подскажите, корректны ли такие архитектуры или умные люди придумали более правильные решения.

P.S.

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


Ответы (0 шт):