Интегриране на React Routing

Интегриране на React Routing

Практически пример за използване на React Router.

Здравейте всички. Това е първата ми професионална статия в тази блог платформа. Всъщност писането на тази статия е голяма радост за мен, защото с това мога да помогна на хората да чуят мнението им, а защо не и да ги коригират, ако има грешки.

Всичко започва с грешки.

Посвещавам тази статия на 6-тата версия на пакета react-router-dom.
В първите си работи не научих това. Но в момента научих и реших да споделя знанията си.

Статията ще съдържа цитати от официалната документация.
Ще стъпка по стъпка обясня и ще покажа кодови фрагменти. Освен това ще споделя
изходния код от GitHubи демонстрацията на проекта в Replit онлайн редактор. Връзките ще бъдат в края на статията.

Какво е React Router?

От официалната документация

React Router е напълно функционална клиентска и сървърна маршрутизираща библиотека за React, JavaScript библиотека за изграждане на потребителски интерфейси. React Router работи навсякъде, където React работи; в мрежата, на сървъра с node.js и на React Native.

Нека го направим…

Стъпка 1. Първоначална инсталация

Ще създадем основно приложение за управление на документи React, което трябва да работи с документи.

Командата по-горе ще настрои приложението за реакция с typescriptв папката document-manager.

Стъпка 2. Настройте структурата на папките

Всички папки, които ще създам в srcпапката.

Структурата на папките ще бъде:

1. компоненти: общи компоненти,
2. страници: компоненти за всяка страница,
3. активи: изображения, стилове, шрифтове и др.,
4. навигация:всички компоненти и помощни функции за навигация на проекта,
5. услуги: файлове с общи услуги,
6. configs:конфигурационни файлове,
7. магазин: в тази директория можете да запазите всички функционални редуцирани магазини.

Стъпка 3. Инсталирайте зависимост и конфигурации

В този проект ще използвам:

1. yarn като мениджър на пакети,
2. anddкато React UI библиотека,
3. sassкато препроцесор за стил.

Трябва да добавим “baseUrl”като свойство във файла tsconfig.json, за да направим абсолютна разделителна способност на файла. Това е много полезно, позволява да се зададе базова директория за разрешаване на неабсолютни имена на модули. След като добавим това, можем да импортираме модули, започващи от “baseUrl”. Ще добавя това свойство в свойството „compilerOptions“.

"baseUrl": "./src",

Стъпка 4. Какво трябва да направя

Преди да започнем, нека си зададем няколко въпроса:

Какво приложение е това?

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

Какви маршрути ще имаме?

1. /dashboard— Изглед на таблото за управление
2. /auth/signin — Страница за вход
3. /auth/signup— Страница за регистрация
4. /documents— списък с всички документи
5. /documents /create — създаване на документ
6. /documents /edit/:documentId — редактиране на документ по id
7. /documents /view/:documentId — подробен преглед на документа по id

Какъв тип компоненти да използваме и как?

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

Какво представлява „маршрутът на оформлението“?

Трябва да имаме компонент, който ще композира нашите маршрути в специфично оформление. Използването на този маршрут на оформлението не е задължително. Полезно е в този случай, когато искате да имате едно и също оформление за няколко компонента (страници) или да направите нашите маршрути частни или публични (с помощта на разрешения).

Layout Route — Родителски маршрут без път, използван изключително за групиране на дъщерни маршрути в конкретно оформление.

Стъпка 5. Започнете да правите

Ще покажа прости кодови фрагменти с обяснения, можете да намерите целия изходен код в GitHub.

След като разберете всички ключови части на приложението, нека започнем.

Създаване на компоненти за оформление В папката „components/layout“.

В тази директория ще създадем компоненти за оформление, които ще се използват в навигацията за обвиване на други компоненти. По-долу е примерът за основния компонент на оформлението, но можете да създадете свой собствен компонент на оформлението по този начин.

<Navbar> е персонализиран компонент за лентата за навигация. Пълният код се намира в хранилището на GitHub.

<Outlet> трябва да се използва в родителските елементи на маршрута, за да изобрази дъщерните им елементи на маршрута. Това позволява вложен потребителски интерфейс да се показва, когато се рендират дъщерни маршрути. Ако родителският маршрут съвпада точно, той ще изобрази дъщерен индексен маршрут или нищо, ако няма индексен маршрут.

Създаване на компоненти на страници В папката “pages”.

Тези страници трябва да добавим към нашата маршрутизация.

1. Табло за управление:Табло за регистриран потребител,
2. Удостоверяване:Тази папка включва страници за упълномощаване (влизане, регистрация),
3. Документи:включва страници за списък с документи, създаване, редактиране и подробен изглед,
4. Неизвестно:страница за 404 не е намерена страница.

Създаване на персонализирана кука за оторизация в папката “hooks”.

Нека създадем кука useAuth,която ни дава потребителски данни и ще ги актуализира.

Създаване на навигация в папката “навигация”.

В тази директория трябва да имаме няколко файла

1. Navigation.tsx — всички маршрути ще бъдат поставени тук,
2. PublicNavigation.tsx — оформление на обществени маршрути,
3. PrivateNavigation.tsx — оформление на частни маршрути,
4. index.ts —от този файл ще експортира всички публични компоненти.

Тези два компонента на оформлението са предназначени да проверят дали потребителят има достъп до тази група от маршрути с помощта на useAuthhook.

<Routes> и <Route> начин за изобразяване на нещо в React Router въз основа на текущото местоположение.

Кодът по-горе представлява пълната група маршрути. След като създадем нашата навигация, трябва да я импортираме в компонента „App.tsx”.

Освен това трябва да импортираме ‹BrowserRouter› във файла index.tsx.

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

Прочетете повече в официалната документация https://reactrouter.com/docs/en/v6/routers/browser-router

След това можем да стартираме нашия проект с помощта на командата

Демо на проекта

Заключение

В тази статия исках да покажа практически примери за използване на react-router. Но този проект включва пълни илюстрации, а не само кодови фрагменти за маршрутизиране. Благодаря за четенето, ще се радвам да чуя здравословното ви мнение.

Хранилище на проект в GitHub

Онлайн редактор за отговор

Референции