Вывод информации на другой странице с помощью react
Есть код https://stackblitz.com/edit/react-vsem7c (см. Переход на другую страницу по нажатию кнопки Войти
На главной странице есть форма авторизации с логином и паролем. После нажатия кнопки Войти должен происходить переход с главной страницы на страницу с профилем, где в теге h1 должен быть отображен логин. Как это организовать с помощью react? Для хранения / отображения логина, нужно использовать redux, для маршрутизации - react-router.
). Возник вопрос как сделать так, чтобы h1 со значением логина, выводилось на отдельной странице /profile ( или на Accaunt, как в коде) (на отдельной, а не на той же странице со ссылками Главная, Войти и кнопкой Изменить состояние)?
По этому поводу есть свои мысли
я отметил ваш ответ (так как основная идея верна), но все же хотелось бы знать как добиться отображения h1 на отдельной странице - /profile (не на странице с кнопкой Изменить состояние и двумя ссылками)? Как я понимаю нужно завести отдельный js файл с компонентом h1, но как передать данные для этого в h1 (в h1 как написано в вопросе должен содержаться логин)?
Но как реализовать не представляю (приведите реализацию этого момента).
Ответы (1 шт):
С React не работал, но чтобы передать данные с одной страницы на другую, нужно воспользоваться свойством localStorage или sessionStorage.
Там используются обычные пары "ключ-значение", так что проблем возникнуть не должно. Но стоит помнить, что если пользователь запретил вашей странцие сохранять cookie-файлы, то записать что-либо в хранилище не получится.
Пример. Добавить значение в хранилище:
localStorage.setItem("login", value);
Пример. Взять значение из хранилища:
var login = localStorage.getItem("login");
Пример. Удалить пару из хранилища:
localStorage.removeItem("login");