Краткий обзор основ React Router

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

1. Установите маршрутизатор 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, чтобы упростить разработку приложений.