Блог

Главная - Вопросы по программированию - Next.js многоступенчатая форма с маршрутизацией

Next.js многоступенчатая форма с маршрутизацией

#reactjs #next.js

Вопрос:

Мой Next.js многоступенчатая форма работает просто отлично, переключаясь между шагами на одной странице index.js

 return (
    <div>
      <Head>
        <title>Next.js Multi Step Form</title>
      </Head>
      < Navbar />
        <div className={styles.container}>
          <FormCard>
            {formStep >= 0 amp;amp; (
              <ContractInfo
                formStep={formStep}
                prevFormStep={prevFormStep}
                nextFormStep={nextFormStep}
              />
            )}
            {formStep >= 1 amp;amp; (
              <PersonalInfo
                formStep={formStep}
                prevFormStep={prevFormStep}
                formStepToLast={formStepToLast}
              />
            )}
            {formStep >= 2 amp;amp; (
              <ConfirmPurchase
                formStep={formStep}
                prevFormStep={prevFormStep}
                nextFormStep={nextFormStep}
              />

            )}
          </FormCard>
        </div>
    </div>
  );

Обновить

Опробовав приведенные ниже предложения, я в конечном итоге обновил свой путь. Я также упрощаю свой код (жестко закодированный), так как у меня всего два шага. Текущий код для index.js выглядит следующим образом:

 const App = () => {
  const router = useRouter();
  const [formStep, setFormStep] = useState(0);
  const { setFormValues } = useContext(FormContext);

  useEffect(() => { router.push(`/?step=${formStep}`), setFormStep(formStep) }, [formStep]);
  
  const nextFormStep = (contract='') => {
    setFormStep(1);
    setFormValues({ contract });
  };


  const prevFormStep = () => {
    setFormStep((formStep) => formStep - 1);
    
  };

  const formStepToLast = () => {
    setFormStep(2);
  };

  return (
    <div>
      <Head>
        <title>Next.js Multi Step Form</title>
      </Head>
      < Navbar />
        <div className={styles.container}>
            {formStep >= 0 amp;amp; (
              <ContractInfo
                formStep={formStep}
                prevFormStep={prevFormStep}
                nextFormStep={nextFormStep}
              />
            )}
            {formStep >= 1 amp;amp; (
              <PersonalInfo
                formStep={formStep}
                prevFormStep={prevFormStep}
                formStepToLast={formStepToLast}
              />
            )}
            {formStep >= 2 amp;amp; (
              <ConfirmPurchase
                formStep={formStep}
                prevFormStep={prevFormStep}
                nextFormStep={nextFormStep}
              />
            )}  
        </div>
    </div>
  );
};

export default App;

Тем не менее, мне не удается перемещаться по форме с помощью кнопок браузера Назад / Далее. Это изменит путь, но не будет отображать соответствующий компонент. Я предполагаю, что это произошло. что-то связанное с государством. Если я установлю значение useState равным (1), он отобразит правильный соответствующий компонент в http://localhost:3000/?step=1, так что это действительно спасает государство. Однако навигация с помощью кнопок браузера невозможна.

Ответ №1:

Вы можете использовать параметр запроса для задания formStep и router.push обработки шагов формы на одной и той же странице, но с отображением разных URL-адресов.

 import { useRouter } from 'next/router';

export default function IndexPage() {
    const router = useRouter();
    const formStep = router.query.step ?? 0;

    // Remaining JSX code
}

Затем в действии для перехода к первому шагу формы вы можете вызвать что-то вроде следующего.

 router.push('/?step=1', '/personal_info');

Это приведет к обновлению URL-адреса в браузере и повторному отображению страницы с formStep >= 1 видимыми компонентами.

Вот кодовое поле с упрощенной версией вашей логики.

Комментарии:

1. Я говорю то же самое в комментариях

2. Это работает потрясающе, пока я не попробую кнопки назад и вперед в браузере. В вашей песочнице они работают, у меня проблема в том, что мои шаги являются частью государства. const [formStep, setFormStep] = useState(0); Я думаю, именно поэтому браузер на самом деле не будет двигаться вперед/назад

3. Установите начальное состояние в const [formStep, setFormStep] = useState(router.query.step ?? 0); , которое должно справиться с этим.

4. Кнопка «Назад» браузера приводит меня к localhost/3000, но по-прежнему отображает шаг 1, а не шаг 0, как это звучит

5. Вы можете использовать useEffect для проверки изменений маршрутизатора и изменения состояния

Метки: