Урок 10 · React

Список и форма сменяются без маршрутизатора

Для двух видов одной маленькой программы маршрутизатор не обязателен.

Почему это следующий шаг

Условный блок уже прячет абзац. Тем же способом можно сменить весь основной кусок страницы.

Как сделать

Храни в state строку "list" или "form". Кнопки меняют эту строку. Ниже одним условием рисуй либо список, либо форму. Данные списка держи выше обоих экранов, чтобы переход к форме их не стирал. Адрес в браузере при этом не меняется — для двух экранов урока это нормально.

{screen === "form" ? <Editor /> : <List />}

Что проверить

• Кнопка открывает второй экран.
• Возврат показывает прежние данные.
• Оба экрана не видны одновременно.