Одностраничное приложение (SPA) — это веб-сайт или веб-приложение, которое динамически перезаписывает существующую веб-страницу с новой информацией с веб-сервера.

В приложении React компоненты извлекают контент сайта и отображают его в один файл HTML в вашем проекте.

React Router поможет вам перейти к выбранному вами компоненту и отобразит его в файле HTML. Чтобы использовать его, вам нужно знать, как настроить и интегрировать React Router с вашим приложением React.

Как установить React-маршрутизатор

Чтобы установить React Router в свой проект React, используя npm, менеджер пакетов JavaScript, выполните следующую команду в каталоге вашего проекта:

npm я реагирую-роутер-дом

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

Чтобы установить React Router с помощью Yarn, выполните следующую команду:

пряжа добавить реакцию-маршрутизатор-dom @ 6

Настройка маршрутизатора React

Чтобы настроить React Router и сделать его доступным в вашем приложении, импортируйте БраузерРоутер от реакция-маршрутизатор-дом внутри твоего index.js файл, а затем оберните компонент приложения в БраузерРоутер элемент:

Импортировать Реагировать от«реагировать»;
Импортировать РеактДОМ от'реакция-дом/клиент'; 
Импортировать Приложение от'./Приложение';
Импортировать {Браузермаршрутизатор} от'реакция-маршрутизатор-дом';
константа корень = ReactDOM.createRoot( документ.getElementById('корень') );
корень.рендер(


 </BrowserRouter>
);

Оборачиваем компонент приложения в БраузерРоутер Элемент предоставляет всему приложению полный доступ к возможностям маршрутизатора.

Маршрутизация к другим компонентам

После настройки вашего маршрутизатора в вашем приложении вы должны создать компоненты своего приложения, маршрутизировать их и визуализировать. Следующий код импортирует и создает компоненты с именами «Главная», «О программе» и «Блог». Он также импортирует Маршрут и Маршруты элементы из реагировать-роутер-дом.

Вы определите свои маршруты внутри Приложение компонент:

Импортировать { Маршруты, Маршрут } от'реакция-маршрутизатор-дом';
Импортировать Дом от'./Дом';
Импортировать О от'./О';
Импортировать Блог от'./Блог';
функцияПриложение() {
возвращаться (

'/' элемент={ } />
'/о' элемент={ } />
'/блог' элемент={ }/>
 </Routes>
 )
}
экспортпо умолчанию Приложение;

Приложение component — это основной компонент, который отображает весь код, написанный вами в других компонентах.

Маршруты element — это родительский элемент, обертывающий отдельные маршруты, которые вы создаете в своем компоненте приложения. Маршрут элемент создает один маршрут. Он принимает два атрибута prop: a путь и элемент.

путь Атрибут определяет URL-адрес предполагаемого компонента. Первый маршрут в приведенном выше блоке кода использует обратную косую черту (/) в качестве пути. Это специальный маршрут, который React будет отображать первым, поэтому Дом Компонент визуализируется при запуске вашего приложения. Не путайте эту систему с реализация условного рендеринга в ваших компонентах React. Вы можете дать это путь присвойте любое имя, которое вам нравится.

элемент атрибут определяет компонент, который Маршрут будет оказывать.

связь component — это компонент React Router, используемый для навигации по различным маршрутам. Эти компоненты получают доступ к различным созданным вами маршрутам.

Например:

Импортировать { Связь } от'реакция-маршрутизатор-дом';
функцияДом() {
возвращаться (



'/о'>О странице</Link>
'/блог'>Страница блога</Link>
Это домашняя страница
 </div>
 )
}
экспортпо умолчанию Дом;

связь компонент почти идентичен тегу привязки HTML, он просто использует атрибут с именем «to» вместо «href». связь Компонент переходит к маршруту с соответствующим путем в качестве атрибута и отображает компонент маршрута.

Вложенная маршрутизация и как ее реализовать

Маршрутизатор React поддерживает вложенную маршрутизацию, что позволяет объединять несколько маршрутов в один маршрут. Это в основном используется, когда есть некоторое сходство в URL-путях маршрутов.

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

Например:

Импортировать { Маршруты, Маршрут } от'реакция-маршрутизатор-дом'; 
Импортировать Статьи от'./Статьи';
Импортировать Новая статья от'./НоваяСтатья';
Импортировать СтатьяOne от'./СтатьяОдин';
функцияПриложение() {
возвращаться (

'/статья' элемент={ }/>
'/статья/новый' элемент={ }/>
'/Статья 1' элемент={ }/>
 </Routes>
 )
}
экспортпо умолчанию Приложение;

Блок кода выше импортирует и маршрутизирует созданные компоненты. Статьи, Новая статья, и СтатьяOne. В URL-путях между тремя маршрутами есть некоторое сходство.

Новая статья Путь маршрута начинается так же, как Статьи Путь к маршруту с добавленной обратной косой чертой (/) и словом «новый», то есть (/новый). Единственная разница между именами путей Статьи Маршрут и СтатьяOne Маршрут — это косая черта (/1) в конце СтатьяOne путь к компоненту.

Вы можете вложить три маршрута, а не оставлять их в их текущем состоянии.

Вот так:

Импортировать { Маршруты, Маршрут } от'реакция-маршрутизатор-дом';
Импортировать Статьи от'./Статьи';
Импортировать Новая статья от'./НоваяСтатья';
Импортировать СтатьяOne от'./СтатьяОдин';
функцияПриложение() {
возвращаться (

'/статья'>
 }/>
'/статья/новый' элемент={ }/>
'/Статья 1' элемент={ }/>
 </Route>
 </Routes>
 )
}
экспортпо умолчанию Приложение;

Вы объединили три отдельных маршрута в один Маршрут элемент. Обратите внимание, что родитель Маршрут элемент имеет только путь атрибут и нет элемент атрибут, определяющий компонент для рендеринга. индекс атрибут в первом потомке Маршрут элемент указывает, что это Маршрут отображается, когда вы переходите к URL-адресу родительского Маршрут.

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

Например:

Импортировать { Маршруты, Маршрут } от'реакция-маршрутизатор-дом';
Импортировать Статьи от'./Статьи';
Импортировать Новая статья от'./НоваяСтатья';
Импортировать СтатьяOne от'./СтатьяОдин';
функцияСтатьяМаршруты() {
возвращаться (

 }/>
'/статья/новый' элемент={ }/>
'/Статья 1' элемент={ }/>
 </Routes>
 )
}
экспортпо умолчанию СтатьяМаршруты;

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

Например:

Импортировать { Маршруты, Маршрут } от'реакция-маршрутизатор-дом';
Импортировать СтатьяМаршруты от'./СтатьиМаршруты';
функцияПриложение() {
возвращаться (

'/статья/*' элемент={ }>
 </Routes>
 )
}
экспортпо умолчанию Приложение;

В финале Маршрут компонента, добавленные символы обратной косой черты и звездочки в конце имени пути маршрута гарантируют, что имя пути соответствует любому имени пути, которое начинается с (/статья).

Есть еще кое-что для React Router

Теперь вы должны быть знакомы с основами создания одностраничных приложений в React.js с использованием React Router.

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