React Router – это популярная библиотека, используемая для создания маршрутов в приложениях React. В этой статье мы изучим основы React Router и как использовать его в своем приложении React.
Производительность вашего внешнего приложения зависит от различных факторов, таких как плавная навигация, дизайн, скорость загрузки страниц, объем извлекаемых и отображаемых данных.
React — это интерфейсный фреймворк для создания интерактивных пользовательских интерфейсов с надежной экосистемой для его поддержки, с инструментами и опытным сообществом разработчиков. React Router — это стандартная библиотека, используемая с React для динамической маршрутизации и маршрутизации на стороне клиента.
Когда мы говорим о динамической маршрутизации, мы имеем в виду маршрутизацию, которая происходит во время рендеринга вашего приложения, а не в конфигурации или соглашении вне работающего приложения. Это означает, что почти все является компонентом React Router. — Обучение реакции
API-интерфейсы React Router помогают создавать одностраничные веб-приложения с навигационными компонентами, которые декларативно объединяются с вашим приложением.
Основы React Router
React Router обеспечивает навигацию между представлениями различных компонентов в приложении React, позволяет изменять URL-адрес браузера и поддерживает синхронизацию пользовательского интерфейса с URL-адресом, предотвращая обновление страницы.
React Router сохраняет функции навигации традиционной навигации в одностраничных приложениях, тем самым предотвращая обновление страницы, что является одним из все более распространенных способов обеспечения бесперебойного взаимодействия с пользователем.
React Router 5 — это текущая доступная стабильная версия. Она полностью обратно совместима с версией 4. В нее было внесено несколько структурных улучшений, в том числе:
- Улучшенная поддержка React 16.
- Убраны все предупреждения в ‹StrictMode›
- Новый API контекста (только для внутреннего использования)
- Полностью автоматизированный выпуск
Кроме того, в выпуске представлены некоторые новые функции, одной из которых является возможность использования массива в ‹Route Path›.
(Примечание: React Router версии 6 доступен в альфа-версии с сервером-рендерингом, еще не полностью функциональной).
Давайте создадим простое приложение React, чтобы понять, как работает React Router.
React Router обеспечивает навигацию между представлениями различных компонентов в приложении React, позволяет изменять URL-адрес браузера и поддерживает синхронизацию пользовательского интерфейса с URL-адресом, предотвращая обновление страницы.
React Router сохраняет функции навигации традиционной навигации в одностраничных приложениях, тем самым предотвращая обновление страницы, что является одним из все более распространенных способов обеспечения бесперебойного взаимодействия с пользователем.
React Router 5 — это текущая доступная стабильная версия. Она полностью обратно совместима с версией 4. В нее было внесено несколько структурных улучшений, в том числе:
- Улучшенная поддержка React 16.
- Убраны все предупреждения в ‹StrictMode›
- Новый API контекста (только для внутреннего использования)
- Полностью автоматизированный выпуск
Кроме того, в релизе появилось несколько новых функций, одна из которых — возможность использовать массив в ‹Route Path›.
(Примечание: React Router версии 6 доступен в альфа-версии с сервером-рендерингом, еще не полностью функциональной).
Давайте создадим простое приложение React, чтобы понять, как работает React Router.
Начало работы с React Router в веб-приложении
Чтобы начать работу с React Router в веб-приложениях, вам понадобится веб-приложение React. Сначала установите приложение create-react-app и начните с нового проекта.
npx create-react-app demo-app cd demo-app
- Установите маршрутизатор React
Следующим шагом будет установка React Router из общедоступного реестра npm с помощью npm или yarn. Поскольку мы создаем веб-приложение, мы будем использовать react-router-dom.
npm install react-router-dom-save
После установки DOM и реагирующих компонентов Router на ваше приложение.
2. Добавьте компоненты React Router
Основными компонентами React Router являются:
- BrowserRouter: это реализация маршрутизатора, в которой используются обычные пути URL-адресов для синхронизации вашего пользовательского интерфейса с URL-адресом.
- Switch: когда ‹Switch› визуализируется, он просматривает свои дочерние элементы ‹Route›, чтобы найти тот, чей путь соответствует текущему URL-адресу.
- Маршрут. Маршрут — это условно отображаемый компонент, который отображает некоторый пользовательский интерфейс, когда его путь совпадает с текущим URL-адресом.
- Ссылка. Компонент ссылки используется для создания ссылок на различные маршруты в вашем приложении и реализации навигации по приложению.
Теперь откройте каталог вашего проекта в редакторе, чтобы добавить компоненты React в ваше приложение, и добавьте приведенный ниже код в файл app.js.
import { BrowserRouter as Router, Route, Link, Switch } from ‘react-router-dom’;
Чтобы использовать React Router, сначала создайте три функции с именами home, about и services. Теперь добавьте следующий код в каждую функцию.
домой()
function Home() { return ( <div> <h2>Home</h2> </div> ); }
о()
function About() { return ( <div> <h2>About</h2> </div> ); }
услуги()
function Services() { return ( <div> <h2>Services</h2> </div> ); }
Наконец, пришло время добавить компоненты React Router в ваше приложение React.
BrowserRouter. Добавьте BrowserRouter с псевдонимом Router в файл app.js, чтобы обернуть все остальные компоненты.
import React from “react”; import { BrowserRouter as Router, Switch, Route, Link } from “react-router-dom”;
Ссылка. Добавьте ссылки на наши компоненты. Компонент ссылки использует реквизит to для описания места, куда должны вести ссылки.
Когда вы запустите свое приложение, вы обнаружите, что URL-адрес изменится в соответствии со значением to props компонентов ссылки.
Маршрут. Компонент маршрута позволяет настроить связь между пользовательским интерфейсом компонента и URL-адресом. Чтобы добавить маршруты в ваше приложение, добавьте приведенный ниже код в файл app.js.
Как только ваши компоненты будут связаны, нажатие на любую ссылку отобразит связанные с ней компоненты.
export default function BasicExample() { return ( <Router> <div> <ul> <li> <Link to=”/”>Home</Link> </li> <li> <Link to=”/about”>About</Link> </li> <li> <Link to=”/services”>Services</Link> </li> </ul> <hr />
Переключиться:
Вы можете визуализировать один компонент, обернув все маршруты внутри компонентов коммутатора. Переключите группы вместе в несколько маршрутов и выполните итерацию по ним, чтобы найти первый, который соответствует пути. Как только совпадение найдено, отображается соответствующий компонент пути.
<Switch> <Route exact path=”/”> <Home /> </Route> <Route path=”/about”> <About /> </Route> <Route path=”/services”> <Services /> </Route> </Switch> </div> </Router>
3. Окончательный исходный код:
Вот окончательный исходный код после добавления компонентов React Router.
import React from “react”; import { BrowserRouter as Router, Switch, Route, Link } from “react-router-dom”; // This site has 3 pages, all of which are rendered // dynamically in the browser (not server rendered). // // Although the page does not ever refresh, notice how // React Router keeps the URL up to date as you navigate // through the site. This preserves the browser history, // making sure things like the back button and bookmarks // work properly. export default function BasicExample() { return ( <Router> <div> <ul> <li> <Link to=”/”>Home</Link> </li> <li> <Link to=”/about”>About</Link> </li> <li> <Link to=”/services”>Services</Link> </li> </ul> <hr /> {/* A <Switch> looks through all its children <Route> elements and renders the first one whose path matches the current URL. Use a <Switch> any time you have multiple routes, but you want only one of them to render at a time */} <Switch> <Route exact path=”/”> <Home /> </Route> <Route path=”/about”> <About /> </Route> <Route path=”/services”> <Services /> </Route> </Switch> </div> </Router> ); } // You can think of these components as “pages” // in your app. function Home() { return ( <div> <h2>Home</h2> </div> ); } function About() { return ( <div> <h2>About</h2> </div> ); } function Services() { return ( <div> <h2>Services</h2> </div> ); }
Когда мы нажимаем на ссылки и переходим к различным компонентам, React Router синхронизирует пользовательский интерфейс вашего приложения с URL-адресом.
Главная страница:
О странице:
Страница службы:
Это простой пример того, как мы можем реализовать навигацию в реагирующем приложении с помощью React Router.
Здесь мы изучили основные принципы React Router, его компонентов и того, как мы можем использовать React Router в веб-приложениях. Надеюсь, вам понравилась эта статья.
Роль DhiWise
DhiWise — это интуитивно понятная платформа для разработки приложений, разработанная и разработанная для того, чтобы дать разработчикам возможность создавать высококачественные веб-приложения и мобильные приложения.
Его расширенные функции позволяют разработчикам быстрее создавать масштабируемые приложения. Он обеспечивает поддержку наиболее популярных технологий разработки, в том числе:
- React.js
- Node.js
- Флаттер
- Ларавель
- Андроид
- iOS
- Mongo.DB
И больше технологий находятся в стадии разработки.
Итак, чего же вы ждете? Начните использовать DhiWise, чтобы упростить разработку приложений.