Подскажите как более корректно сделать следующее (знаю несколько способов, но может это костыли и хотелось бы знать так ли это :))
есть независимые компоненты-страницы (т.е. занимают целую страницу и состоят из множества вспомогательных компонент) - ComponentPage1
, ComponentPage2
, ComponentPage3
, ComponentPage4
, ...
после того как пользователь заканчивает работу в одном компоненте, то переходит к следующему по нажатии на кнопку "Далее", следующий может получать данные от предыдущего или нет - это не существенно
Как правильно реализовать такой переход?
В голову приходит несколько способов:
через один из видов роутеров, например
HashRouter
<HashRouter> <Routes> <Route path="page1/*" element={<ComponentPage1 />} /> <Route path="page2/*" element={<ComponentPage2 />} /> <Route path="page3/*" element={<ComponentPage3 />} /> <Route path="page4/*" element={<ComponentPage4 />} /> </Routes> </HashRouter>
а при нажатии просто переходить по соответствующей ссылке: site#page2
и т.п.
Но для последовательного перехода от одной странице к следующей такой переход кажется кривоватым и избыточным (могу ошибаться)
через глобальную переменную идентификатора страницы (а за переменной следить уже средствами Mobx, Redux или подобным средством):
const pages = { 'page1': ComponentPage1, 'page2': ComponentPage2, 'page3': ComponentPage3, 'page4': ComponentPage4 }; ... {React.createElement(pages[global_page_id], params)}
Такой подход вроде как кажется правильным, но мало ли что
поскольку каждая следующая страница показывается только после предыдущей и никак иначе, то можно сделать такой подход - если в глобальную переменную идентификатора страницы идентификатор текущей страницы - отрисовываем её иначе отрисовываем следующую страницы - т.е. этакий рекурсивый подход
{global_page_id === 'page2' ? this.CurrentContent() : <ComponentPage3 />}
Недостаток такого подхода - сам факт вложенности одного компонента в другой (не знаю насколько это правильно) и передача данных от 1 компонента к последнему через все остальные (хотя можно все хранить в одном глобальном месте)
Подскажите какой же подход считается более правильным или вообще есть 4-ое решение, которое и надо использовать, а не творить костыли