Научете React Router за 5 минути - урок за начинаещи

Понякога имате само 5 минути свободни. Вместо да го прахосваме в социалните медии, нека вземем 5-минутно въведение в React-Router! В този урок ще научим основите на маршрутизацията в React, като изградим навигация за уебсайт на магазин за плетене на Scrimba. Не е реално, но може би един ден ...;)

Ако искате подходящо въведение в тази тема, можете да се присъедините към списъка с чакащи за предстоящия ми усъвършенстван курс на React или ако все още сте начинаещ, разгледайте уводния ми курс за React.

Какво е React-Router?

Много съвременни уебсайтове всъщност са съставени от една страница, те просто приличат на множество страници, защото съдържат компоненти, които се представят като отделни страници. Те обикновено са посочени като специални защитени зони - ите ingle- стр възраст на РИЛОЖЕНИЯ. В основата си това, което React Router прави, е да изобрази условно някои компоненти за показване в зависимост от маршрута, който се използва в URL адреса ( /за началната страница, /aboutза страницата около и т.н.).

Например можем да използваме React Router, за да свържем www.knit-with-scrimba.com/ с www.knit-with-scrimba.com/about или www.knit-with-scrimba.com/shop

Звучи страхотно - как да го използвам?

За да използвате React Router, първо трябва да го инсталирате с помощта на NPM:

npm install react-router-dom 

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

Ще трябва да импортирате BrowserRouter, Route и Switch от react-router-domпакета:

import React, { Component } from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; 

В моя пример свързвам целевата страница с две други "страници" (които всъщност са само компоненти), наречени Shopи About.

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

// index.js ReactDOM.render(   , document.getElementById('root') ) 

След това, в компонента на приложението, добавете Switchелемента (отворени и затварящи маркери). Те гарантират, че се изобразява само един компонент наведнъж. Ако не използваме това, можем по подразбиране да използваме Errorкомпонента, който ще напишем по-късно.

function App() { return (     ) } 

Сега е време да добавите етикетите си. Това са връзките между компонентите и трябва да се поставят вътре в етикетите.

За да кажете на маркерите кой компонент да заредите, просто добавете pathатрибут и името на компонента, който искате да заредите с componentатрибут.

Много URL адреси на начални страници са името на сайта, последвано от "/"например www.knit-with-scrimba.com/ . В този случай добавяме exactкъм маркера Route. Това е така, защото другите URL адреси също съдържат „/“, така че ако не кажем на приложението, че трябва да търси само /, то зарежда първия, за да съответства на маршрута, и получаваме доста трудна грешка, с която да се справим.

function App() { return (        ) } 

Сега импортирайте компонентите в приложението. Може да пожелаете да ги имате в отделна папка "компоненти", за да поддържате кода чист и четим.

import Home from './components/Home'; import About from './components/About'; import Shop from './components/Shop'; 

Към това съобщение за грешка, което споменах по-рано, което се зарежда, ако потребител въведе грешен URL адрес. Това е точно като нормален таг, но без път. Компонентът Грешка съдържа

Oops! Page not found!

. Не забравяйте да го импортирате в приложението.

function App() { return (         ) } 

Засега нашият сайт е навигационен само чрез въвеждане на URL адресите. За да добавим кликващи връзки към сайта, използваме Linkелемента от React Router и настройваме нов Navbarкомпонент. Още веднъж, не забравяйте да импортирате новия компонент в приложението.

Сега добавете Linkза всеки компонент в приложението и използвайте, за to="URL"да ги свържете.

function Navbar() { return ( Home  About Us  Shop Now ); }; 

Вашият сайт вече има кликващи връзки, които могат да ви навигират около приложението ви с една страница!

Заключение

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

За да научите повече за React Hooks и други страхотни функции на React, можете да се присъедините към списъка с чакащи за предстоящия ми усъвършенстван курс React.

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

Щастливо кодиране;)