Едностранично приложение (SPA) е уебсайт или уеб приложение, което динамично пренаписва съществуваща уеб страница с нова информация от уеб сървъра.

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

React Router ви помага да навигирате до компонента по ваш избор и го изобразява в HTML файла. За да го използвате, трябва да знаете как да настроите и интегрирате React Router с вашето React приложение.

Как да инсталирате React Router

За да инсталирате React Router във вашия React проект, като използвате npm, мениджърът на пакети на JavaScript, изпълнете следната команда в директорията на вашия проект:

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

Като алтернатива можете да изтеглите пакета с помощта на Yarn, мениджър на пакети, който ви позволява да инсталирате библиотечни пакети офлайн.

За да инсталирате React Router с помощта на Yarn, изпълнете тази команда:

yarn add react-router-dom@6

Настройване на React Router

За да конфигурирате React Router и да го направите достъпен във вашето приложение, импортирайте BrowserRouter от реагират-рутер-дом вътре във вашия index.js файл, след което обвийте компонента на приложението си в BrowserRouter елемент:

импортиране Реагирайте от"реагира";
импортиране ReactDOM от'react-dom/клиент'; 
импортиране Приложение от„./Приложение“;
импортиране {BrowserRouter} от'react-router-dom';
конст корен = ReactDOM.createRoot( документ.getElementById("корен") );
root.render(


 </BrowserRouter>
);

Обвиване на компонента на приложението в BrowserRouter дава на цялото приложение пълен достъп до възможностите на рутера.

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

След като настроите вашия рутер във вашето приложение, трябва да продължите и да създадете компонентите на приложението си, да ги маршрутизирате и да ги визуализирате. Следният код импортира и създава компоненти, наречени „Начало“, „Информация“ и „Блог“. Той също така внася Маршрут и Маршрути елементи от реагират-рутер-дом.

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

импортиране { Маршрути, Маршрут } от'react-router-dom';
импортиране У дома от'./У дома';
импортиране относно от'./Относно';
импортиране Блог от'./Блог';
функцияПриложение() {
връщане (

'/' елемент={ } />
'/относно' елемент={ } />
'/блог' елемент={ }/>
 </Routes>
 )
}
износпо подразбиране Приложение;

The Приложение компонент е основният компонент, който изобразява целия код, който сте написали в другите си компоненти.

The Маршрути елемент е родителският елемент, който обгръща отделните маршрути, които създавате в компонента на вашето приложение. The Маршрут елемент създава единичен маршрут. Необходими са два атрибута на проп: a път и ан елемент.

The път определя URL пътя на предвидения компонент. Първият маршрут в горния кодов блок използва обратна наклонена черта (/) като свой път. Това е специален маршрут, който React ще изобрази първо, така че У дома изобразява компонент, когато стартирате приложението си. Не бъркайте тази система с внедряване на условно изобразяване във вашите React компоненти. Можете да дадете това път дайте всяко име, което искате.

The елемент атрибут дефинира компонента, който Маршрут ще изобрази.

The връзка компонент е компонент на React Router, използван за навигация по различни маршрути. Тези компоненти имат достъп до различните маршрути, които сте създали.

Например:

импортиране { Връзка } от'react-router-dom';
функцияУ дома() {
връщане (



'/относно'>Страница за информация</Link>
'/блог'>Страница в блог</Link>
Това е началната страница
 </div>
 )
}
износпо подразбиране У дома;

The връзка компонент е почти идентичен с HTML anchor тага, той просто използва атрибут с име "до" вместо "href". The връзка компонент навигира до маршрута със съответното име на пътя като свой атрибут и изобразява компонента на маршрута.

Вложено маршрутизиране и как да го приложите

React Router поддържа вложено маршрутизиране, което ви позволява да обгръщате няколко маршрута в един маршрут. Това се използва главно, когато има известно сходство в URL пътищата на маршрутите.

След като създадете компонентите, които искате да маршрутизирате, ще разработите индивидуални маршрути за всеки от тях в ап компонент.

Например:

импортиране { Маршрути, Маршрут } от'react-router-dom'; 
импортиране Статии от'./Статии';
импортиране Нова Статия от'./Нова статия';
импортиране ArticleOne от'./ArticleOne';
функцияПриложение() {
връщане (

'/статия' елемент={ }/>
'/статия/нова' елемент={ }/>
'/статия/1' елемент={ }/>
 </Routes>
 )
}
износпо подразбиране Приложение;

Кодовият блок по-горе импортира и насочва създадените компоненти Статии, Нова Статия, и ArticleOne. Има някои прилики в URL пътищата между трите маршрута.

The Нова Статия Името на пътя на маршрута започва по същия начин като Статии Името на пътя на маршрута с добавена обратна наклонена черта (/) и думата "нов", т.е. (/ново). Единствената разлика между имената на пътищата на Статии Маршрут и ArticleOne Маршрутът е наклонената черта (/1) в края на ArticleOne пътека на компонента.

Можете да вложите трите маршрута, вместо да ги оставяте в текущото им състояние.

Така:

импортиране { Маршрути, Маршрут } от'react-router-dom';
импортиране Статии от'./Статии';
импортиране Нова Статия от'./Нова статия';
импортиране ArticleOne от'./ArticleOne';
функцияПриложение() {
връщане (

'/статия'>
 }/>
'/статия/нова' елемент={ }/>
'/статия/1' елемент={ }/>
 </Route>
 </Routes>
 )
}
износпо подразбиране Приложение;

Обвили сте трите отделни маршрута в един Маршрут елемент. Имайте предвид, че родителят Маршрут елементът има само път атрибут и бр елемент атрибут, който определя компонента за изобразяване. The индекс атрибут в първото дете Маршрут елемент уточнява, че това Маршрут изобразява, когато навигирате до URL пътя на родителя Маршрут.

За да направите кода си по-добър и поддържаем, трябва да дефинирате маршрутите си в компонент и да го импортирате в ап компонент за използване.

Например:

импортиране { Маршрути, Маршрут } от'react-router-dom';
импортиране Статии от'./Статии';
импортиране Нова Статия от'./Нова статия';
импортиране ArticleOne от'./ArticleOne';
функцияArticleRoutes() {
връщане (

 }/>
'/статия/нова' елемент={ }/>
'/статия/1' елемент={ }/>
 </Routes>
 )
}
износпо подразбиране ArticleRoutes;

Компонентът в кодовия блок по-горе съдържа вложените маршрути, които преди са били в компонента на приложението. След като създадете компонента, трябва да го импортирате в ап компонент и го маршрутизирайте с помощта на единичен Маршрут елемент.

Например:

импортиране { Маршрути, Маршрут } от'react-router-dom';
импортиране ArticleRoutes от'./ArticleRoutes';
функцияПриложение() {
връщане (

'/статия/*' елемент={ }>
 </Routes>
 )
}
износпо подразбиране Приложение;

На финала Маршрут компонент, добавените символи обратна наклонена черта и звездичка в края на името на пътя гарантират, че името на пътя съответства на всяко име на път, което започва с (/статия).

Има повече за React Router

Вече трябва да сте запознати с основите на това как да създавате едностранични приложения в React.js, като използвате React Router.

В библиотеката на React Router има много повече функции, които правят изживяването на разработчиците по-динамично при изграждане на уеб приложения.