0

Подскажите как более корректно сделать следующее (знаю несколько способов, но может это костыли и хотелось бы знать так ли это :))

есть независимые компоненты-страницы (т.е. занимают целую страницу и состоят из множества вспомогательных компонент) - ComponentPage1, ComponentPage2, ComponentPage3, ComponentPage4, ...

после того как пользователь заканчивает работу в одном компоненте, то переходит к следующему по нажатии на кнопку "Далее", следующий может получать данные от предыдущего или нет - это не существенно

Как правильно реализовать такой переход?

В голову приходит несколько способов:

  1. через один из видов роутеров, например 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 и т.п.

Но для последовательного перехода от одной странице к следующей такой переход кажется кривоватым и избыточным (могу ошибаться)

  1. через глобальную переменную идентификатора страницы (а за переменной следить уже средствами Mobx, Redux или подобным средством):

     const pages = {
       'page1': ComponentPage1, 
       'page2': ComponentPage2,
       'page3': ComponentPage3,
       'page4': ComponentPage4
     };
    
     ...
    
     {React.createElement(pages[global_page_id], params)}
    

Такой подход вроде как кажется правильным, но мало ли что

  1. поскольку каждая следующая страница показывается только после предыдущей и никак иначе, то можно сделать такой подход - если в глобальную переменную идентификатора страницы идентификатор текущей страницы - отрисовываем её иначе отрисовываем следующую страницы - т.е. этакий рекурсивый подход

     {global_page_id === 'page2' ? this.CurrentContent() : <ComponentPage3 />}
    

Недостаток такого подхода - сам факт вложенности одного компонента в другой (не знаю насколько это правильно) и передача данных от 1 компонента к последнему через все остальные (хотя можно все хранить в одном глобальном месте)

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

1
  • Как правильно реализовать такой переход? Я вопрос не понял. Какой именно переход? Вы данные хотите отправить на следующую страницу или что?
    – Randall
    20 мар в 8:09

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Посмотрите другие вопросы с метками или задайте свой вопрос.