Я работаю над созданием потока настройки регистрации> профиля для нового приложения, использующего React + Redux.

Я нашел следующий пример для мастера с избыточной формой:

http://redux-form.com/6.7.0/examples/wizard/

Это, кажется, самый близкий пример, но проблема в том, что каждый шаг мастера не меняет URL-адрес, поэтому, если пользователь нажимает кнопку «вперед / назад» браузера или обновляет свой браузер, он сломается.

Было бы хорошо, чтобы мастер форм Redux имел постоянные URL? Как я могу подойти к этому как новичок?

Что-то, где мастер имеет URL-адреса, такие как:

/wizard/name
/wizard/profile
/wizard/photo
9
AnApprentice 27 Май 2017 в 20:25

2 ответа

Лучший ответ

Было бы хорошо, чтобы мастер форм Redux имел постоянные URL?

Способ его реализации зависит от каждого варианта использования. Я не вижу никаких проблем, почему это не будет хорошо.

пример мастера расскажет вам все, что вам нужно знать о вашем подходе.

Говоря об официальном примере, вы можете подойти к этому следующим образом:

  • Создайте маршрут /wizard/name, который будет отображать тот же компонент WizardForm.js;
  • Если подпуть - /name, визуализируйте WizardFormFirstPage
  • То же самое для других подпутей.
4
halfer 13 Фев 2020 в 22:27

Недавно я реализовал мастер с избыточной формой с маршрутизацией на стороне клиента. Я поделюсь некоторыми деталями здесь для потомков ...

У меня есть компонент под названием MainContent, который имеет несколько маршрутов React-Router 4. Один из этих маршрутов выглядит так:

<Route path={'/profile/:profileSection'} component={Profile} /> .

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

Обратите внимание на параметр маршрута profileSection. Если текущий URL: https://www.myawesomeapp.com/profile/my-age, компонент профиля получит опору profileSection от маршрутизатора со (строковым) значением 'my-age'. Это будет использоваться для загрузки формы "step", которая спрашивает пользователя о ее возрасте.

Профиль является компонентом с состоянием. Его метод рендеринга возвращает обернутые компоненты для каждого шага. Это выглядит примерно так:

render(){ return ( <div> <Step1 {...this.state} {...this.props} /> <Step2 {...this.state} {...this.props} /> <Step3 {...this.state} {...this.props} /> </div> ) }

profileSection реквизит маршрутизатора передается в каждый из компонентов "шага". Эти компоненты шага создаются из HOC. HOC украшает каждый компонент следующим образом:

  1. Сопоставьте регулярное выражение с profileSection пропеллером.
  2. Если он совпадает, метод render компонента возвращает разметку для указанного шага.
  3. если он не совпадает, метод рендеринга компонента возвращает ноль.

Надеюсь, это поможет кому-то в будущем ...

3
Neil Girardi 16 Май 2018 в 16:16