Как сделать переход на другую страницу в react

Добавил пользователь Евгений Кузнецов
Обновлено: 19.09.2024

Это, где я включил мой onClick

Функция, написанная для onClick

Вам нужно связать обработчик в конструкторе вашего компонента, иначе React не сможет найти вашу функцию home .

Если вы действительно хотите создать одно приложение, я бы предложил использовать React Router. В противном случае вы можете просто использовать простой Javascript:

В зависимости от вашего желания вы хотите выполнить два основных способа:

Так как в соответствии с вашим вопросом мое предположение заключается в том, что вы не создаете одностраничное приложение и не используете что-то вдоль линий React router. И конкретно упомянутое использование button Ниже приведен пример кода

Надеюсь, это поможет, если нет, и вы выясните ответ, пожалуйста, поделитесь

Здесь мы поговорим о такой важной составляющей любого серьезного веб-приложения, как маршрутизация. Пользователь должен видеть где он находится в данный момент времени в приложении, а также иметь возможность навигации по истории. Сам по себе React маршрутизацию не поддерживает, зато есть мощные библиотеки с целым арсеналом возможностей. Как раз одну из таких библиотек мы интегрируем в наш проект.

5.6.1 Для чего нужна маршрутизация?

Сам по себе React не предоставляет такой возможности, это задача специальных библиотек. Как правило, используя API такой библиотеки мы подключаем компоненты страниц нашего положения, сопоставляя их с определёнными путями. После этого, переходя с одной страницы на другую мы будем видеть в адресной строке, как изменяется текущий путь.

На данный момент есть несколько популярных библиотек для маршрутизации: react-router , router5 , aviator и пр. Полный список можно посмотреть здесь. Мы будем использовать react-router . Хотя в вашем проекте может быть любая другая - все зависит от бизнес-требований.

5.6.2 Библиотека react-router

Эта библиотека популярна, довольна проста в использовании и обладает хорошей документацией. Она предоставляет такие возможности как:

Маршрутизация (компонент Route )

История (свойство history )

Это лишь малая часть того, что умеет библиотека. В нашем приложении мы будем использовать самые базовые вещи, чтобы у вас было общее представление о сути маршрутизации, о том как её подключать и использовать.

5.6.3 Добавление react-router в приложение

Для начала нам нужно добавить возможность работы с историей. Для этого есть специальная библиотека history:

Теперь подключим в наше приложение эту возможность, обновив файл index.js :

Мы создали объект кастомной истории и передали его как свойство в компонент . Этого можно и не делать. Достаточно использовать компонент
вместо , тогда будет использован API истории HTML5.

Далее необходимо подключить саму библиотеку react-router . Для этого нужно установить модуль react-router-dom .

Как видно, у нас пока два маршрута: /home и /appointments . Введя в адресную строку один из них, приложение перенаправит нас на соответствующую страницу. Элемент здесь задаёт страницу по умолчанию. Отдельно стоит поговорить о withRouter . Это старший компонент, он же HOC. С помощью него вы можете получить доступ к свойствам объекта history и к объекту match , ближайшего . withRouter будет передавать в обёрнутый компонент обновленные свойства match , location , и history каждый раз, когда тот отрисовывается.

Все необходимые изменения сделаны, и теперь вы можете протестировать работу приложения, открыв его в отдельной вкладке:

Перейдя на новую вкладку вы увидите текущий путь в адресной строке:

Теперь попробуйте перейти на список приёмов и понаблюдайте за изменением текущего пути. Затем вернитесь назад, нажав на соответствующую кнопку в браузере. Сейчас вы видите маршрутизацию и историю в действии.

SPA (single page application) переводится как “одностраничное приложение”, очень распространенный способ программирования веб-сайтов в наши дни: идея в том, что сайт загружает весь нужный для пользовательского опыта HTML/JS сразу же при первом посещении главной страницы, а при последующих переходах по страницам браузер лишь просматривает содержимое заново, не обновляя сайт.

Одностраничные приложения на JavaScript-фреймворках улучшают удобство веб-сайта для посетителя благодаря непрерывности пользовательского опыта; перейдя на страницу веб-сайта вы сразу сможете определить — это SPA или многостраничное приложение: всего лишь быстро нажмите несколько ссылок в навигации. Многостраничное приложение будет перезагружаться, заставляя весь пользовательский интерфейс быстро мигать в зависимости от содержимого, происходит подобное из-за обновления сайта. Напротив, SPA плавно отображается всегда, в любой момент, поскольку такое приложение просто показывает пользователю другой контент без обновления страницы веб-сайта в его браузере.

В руководстве рассмотрим, как написать single page application с помощью React Router.

Оглавление:

Что такое SPA?
Приложение на React с нуля.
React Router: маршрутизация в React.
UseParams: передача данных в ссылку.
UseLocation: передача данных через React Router.
UseHistory: программная маршрутизация.
Выводы.

Сначала создайте новый файл-шаблон приложения, выполните команду:

Войдите в только что созданную папку app и установите React-Router, необходимый для написания SPA.

Для начала измените только что созданное приложения: откройте файл src/App.js и замените весь код из него на следующий:

Уже заметили, что функция App() возвращает компонент ? Соответственно, следующий шаг в разработке SPA — написать компонент , чтобы приложение не упало. Создайте новую папку layouts , а в ней — файл layouts/main.js : в данном файле будем хранить базовый макет приложения.

Для начала, мы создадим в файле main.js навигационную панель; она будет выглядеть недостаточно хорошо с точки зрения дизайна, но ведь вы читаете руководство ради изучения React Router, а не ради готовой CSS-вёрстки. Навигация содержит ссылки на страницу с информацией о сайте и страницу с контактами.

Сразу под навигацией создадим блок

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

Теперь давайте расширим ссылками элемент навигационной панели, а затем посетим только что созданную страницу: создайте в существующей директории src новую директорию с названием components , в ней мы сохраним все компоненты React-приложения; затем создайте файл components/navbar/navbar.js .

Наконец, откройте файл src/index.css и вставьте следующий фрагмент CSS, ведь он поможет красиво отобразить навигационную панель в виде горизонтального списка:

Запустите приложение и откройте в браузере ссылку localhost:3000 , чтобы полюбоваться на свои труды — ваше первое React single page application:

Прежде чем приступить к реализации React Router, нам нужно создать три очень простых компонента: они будут только лишь выводить на экран свое название.

Скопируйте и вставьте приведенный выше код в три созданных ранее файла компонентов, лишь измените в каждом из них название на соответствующее конкретной странице сайта. Таким образом, у вас должны получиться следующие компоненты React-приложения: components/about/About.js , components/contact/Contact.js и components/home/Home.js , причём код во всех этих файлах должен быть одинаково похож на пример выше, лишь с измененными названиями внутри тегов

Маршрутизация в React

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

Начнем с добавления в main.js следующего импорта:

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

Теперь создадим HashRouter , внутрь которого переместим всё содержимое файла main.js : это необходимо, чтобы убедиться в правильном использовании компонентов, например, если компонент Route определён вне HashRouter , то он не сработает. Поэтому HashRouter необходимо сделать родителем, поместив внутрь него весь остальной код; именно по этой причине маршрутизаторы часто встречаются в App.js .

Подсказка: позже мы заменим HashRouter на BrowserRouter .

Переключатель Switch размещается внутри компонента div с контентом, поскольку именно там отображается содержимое (контент) каждой новой выбранной страницы.

Помните: компонент div с контентом отображается при каждом совпадении маршрута Route с конкретным URL, а переключатель Switch следит, чтобы отобразилось только первое совпадение.

Все маршруты Route определены внутри переключателя Switch , поскольку одновременно на странице отображается только один компонент; однако нередко встречается вариация с определением нескольких маршрутов вне переключателя. Вот код:

Далее необходимо изменить Navbar.js так, чтобы он содержал специальные компоненты NavLink вместо тегов , ведь маршрутизатор будет работать только с компонентами Link .

Вы заметили, что путь / содержит ключевое слово? Оно необходимо из-за того, что такой путь по умолчанию соответствует ВСЕМ ВОЗМОЖНЫМ путям, ведь все они содержат данный символ. Помните, какую ссылку выберет переключатель Switch ? Именно первое совпадение, поэтому необходимо явно указать, что выбирать путь / нужно только в случае полного, абсолютного совпадения. Пример программы:

По желанию измените свойство CSS .active в файле index.css , визуально выделив активную навигационную ссылку.

Откройте страницу по адресу localhost:3000 , чтобы оценить результат и протестировать навигацию по сайту. Если все этапы разработки выполнены правильно, то вы должны увидеть одну особенность поведения веб-страницы: содержимое переключается, в то время как верхняя панель навигации остается неизменной.

Передача данных в ссылку

Одна из ключевых особенностей ссылок заключается в возможности передачи разных данных в компоненты, что довольно важно, например, при настройке профиля пользователя.

Рассмотрим два способа передачи данных в маршрутизаторе.

Первый способ — это хук useParams из react-router , позволяющий передавать пары ключ-значение в URL.

Теперь напишем профиль пользователя и выведем его имя на витрину.

Сначала создайте новую папку user , далее — добавьте в неё файл components/user/profile.js .

В файле profile.js импортируем useParams , затем присваиваем значение имени пользователя с помощью данного хука. Вот код:

Как useParams узнаёт, какое именно значение извлекать? При помощи именованных параметров из объявления маршрута, конечно же; параметры именуются путем добавления :parameter к Route . Поэтому теперь измените маршрут в main.js , добавив к нему параметр :username следующим образом:

Последнее, что нужно изменить — навигационная панель должна показывать страницу профиля и вставлять значение имени пользователя в ссылку. Для примера всё жестко закодировано, но в реальном сценарии ваша панель навигации почти всегда получает имя пользователя откуда-то ещё.

Navbar.js — добавление ссылки на profile/percybolmer , где percybolmer — значение имени пользователя, жестко закодированное для примера

Теперь настало время снова посетить ваш веб-сайт, посмотреть на результаты ваших трудов. Обратите внимание, что URL-адрес явно показывает значение имени пользователя. Попробуйте изменить URL-адрес в браузере, чтобы увидеть и проанализировать изменения.

Передача данных через React Router

Как вы уже догадались, не стоит добавлять слишком много URL-параметров, более того, с помощью параметра передаются только строки, а вам, скорее всего, понадобится передавать куда более разнообразные данные.

К счастью, всё возможно благодаря state , переменной состояния в ссылках: каждая ссылка может иметь свой параметр to для получения данных, опосля передающихся через переменную состояния с помощью хука useLocation .

В объекте to обязательно должны устанавливаться переменная состояния state и переменная pathname — это конечная точка URL.

И вот теперь вы думаете: “Отлично, пора запускать!”; однако на всех форумах вроде Stack Overflow регулярно задаются вопросы, которые мы сразу же и рассмотрим в данном руководстве.

“Да, я специально допустил ошибки, чтобы убедиться, что мы их устраним.” — Злой Учитель Программирования.

Две самые распространенные среди новичков проблемы:

HashRouter не поддерживает хук useLocation
Нельзя размещать маршрутизатор Router внутри компонента, который размещает маршрутизатор в дереве.

Для начала разберёмся с первой проблемой — несовместимостью HashRouter и хука useLocation . Важно это знать, а также очень важно подчеркнуть это в документации. Именно из-за данной проблемы мы заменим HashRouter на BrowserRouter . Единственное изменение, которое нужно сделать — изменить идентификатор и убедиться, что BrowserRouter корректно импортирован.

А пока мы меняем маршрутизатор, то нужно решить проблему номер два: просто перенесите Router в файл index.js , что заставит компонент Router обернуть всё приложение и, таким образом, он перестанет быть частью компонента, добавляющего сам Router в дерево. Вот код:

Далее удалим маршрутизатор из файла main.js :

Затем слегка перепишем код в файле navbar.js , ведь необходимо убедиться, что объект to передает больше данных, чем раньше. Код приведен ниже:

И напоследок пропишем хук useLocation ; из примера вы узнаете, как присвоить и переменную State , и переменную pathname . Данный сниппет почти ничем не отличается от применения хука useParams :

Снова перейдите по ссылке localhost:3000 , проанализируйте поведение и внешний вид веб-сайта. Заметьте, как изменились URL после удаления HashRouter :

Иногда требуется программно перенаправлять пользователя по ссылке на основе какого-либо события: вам пригодится хук useHistory , возвращающий объект истории для перенаправления браузера по нужному пути. Данный хук крайне прост в применении: при одновременном использовании объекта history и push(route) произойдёт перенаправление браузера.

Теперь давайте сделаем тег

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

Далее мы применим тот же самый подход, что и раньше: присвоим переменную с помощью хука, на этот раз — useHistory .

Наконец-то в последний раз перейдите по ссылке localhost:3000 и посмотрите на финальный результат своих трудов. Теперь перейдите на любую страницу, кроме стартовой по адресу / , а затем нажмите на кнопку: вуаля, вас перенаправило обратно на главную!

Настройка

После всех импортов создаём новый экземпляр истории

И передаём её в роутер

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

Использование перенаправления функцией

У объекта history есть несколько методов для навигации. Подробно о них вы можете прочитать в документации.

Вариант 2. withRouter

В react-router-dom есть встроенная возможность с помощь HOC передать историю в компонент для этого мы сделаем следующие:

Для type scripy

Далее мы обернём импорт компонента в whitRouter

Чтобы использовать историю мы внутри компонента получим её из пропсов.

А далее нам доступны методы истории, которые описаны в документации. Во простой пример:

whithRourer и connect из react-redux

Не совсем понятно или красиво как использовать whitRouter и conneсt вместе. Для более красивой записи можно использовать lodash/fp. C лодашем запись импорта будет выглядеть так:

Призываю вас активно делиться своим опытом по программированию. Я могу предоставить возможность рассказать о вашем опыте на моём сайте. Напишите мне лично или оставьте комментарий.

Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.

Читайте также: