Реализация роутинга в 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