Разглеждайки едностранично приложение, изглежда, че има няколко страници; 𝓽𝓱𝓸𝓼𝓮 𝓶𝓾𝓵𝓽𝓲𝓹𝓵𝓮 𝓹𝓪𝓰𝓮𝓼 𝓪𝓻𝓮 𝓬𝓸𝓶𝓹𝓸𝓷𝓮𝓷𝓽.
𝕽𝖊𝖆𝖈𝖙 𝕽𝖔𝖚𝖙𝖊𝖗 изобразява всички тези компоненти според URL адреса, използван в маршрута, т.е. (/Начало, /За нас, /Контакт и т.н.)
инсталирайте го с помощта на NPM — → 𝖓𝖕𝖒 𝖎𝖓𝖘𝖙𝖆𝖑𝖑 𝖗𝖊𝖆𝖈𝖙-𝖗𝖔𝖚𝖙𝖊𝖗-𝖉𝖔𝖒
𝗕𝗿𝗼𝘄𝘀𝗲𝗿𝗥𝗼𝘂𝘁𝗲𝗿, 𝗥𝗼𝘂𝘁𝗲, 𝗮𝗻𝗱 𝗦𝘄𝗶𝘁𝗰𝗵, импортирайте всички тези три от техния-react-dom package.router
Целевата страница ще бъде свързана с две други страници.
Ако искате да използвате 𝓡𝓮𝓪𝓬𝓽 𝓡𝓸𝓾𝓽𝓮𝓻, тогава ще трябва да настроите приложението си съответно. Трябва да изобразите всичко вътре ‹𝗕𝗿𝗼𝘄𝘀𝗲𝗿𝗥𝗼𝘂𝘁𝗲𝗿›.
// 𝕚𝕟𝕕𝕖𝕩.𝕛𝕤
ℝ𝕖𝕒𝕔𝕥𝔻𝕆𝕄.𝕣𝕖𝕟𝕕𝕖𝕣(
<𝔹𝕣𝕠𝕨𝕤𝕖𝕣ℝ𝕠𝕦𝕥𝕖𝕣>
<𝔸𝕡𝕡 />
</𝔹𝕣𝕠𝕨𝕤𝕖𝕣ℝ𝕠𝕦𝕥𝕖𝕣>,
𝕕𝕠𝕔𝕦𝕞𝕖𝕟𝕥.𝕘𝕖𝕥𝔼𝕝𝕖𝕞𝕖𝕟𝕥𝔹𝕪𝕀𝕕(‘𝕣𝕠𝕠𝕥’)
)
Този компонент има логиката, благодарение на която се показват всички останали предоставени от вас компоненти.
Ще има превключващ елемент в компонента на приложението, който ще изобразява компонентите един по един.
Елементите на превключвателя имат тагове ‹Route›. Маршрутът съдържа пътя и името на страницата (компонента), която трябва да бъде стартирана. В случай на начални страници, “/” ще се появи в пътя и “exact” ще дойде в името. Това е така, защото „/“ се намира във всеки път.
Сега можете да импортирате компоненти в приложението. Може да пожелаете да ги имате в отделна папка „𝒄𝒐𝒎𝒑𝒐𝒏𝒆𝒏𝒕𝒔“, за да поддържате кода чист и четим.
Ако по погрешка потребителят въведе грешен URL адрес, тогава за него има таг ‹Route›, който е без пътя.
<𝖍1>𝕺𝖔𝖕𝖘! 𝖂𝖍𝖞 𝖞𝖔𝖚 𝖆𝖗𝖊 𝖙𝖞𝖕𝖎𝖓𝖌 𝖎𝖓𝖈𝖔𝖗𝖗𝖊𝖈𝖙 𝖀𝕽𝕷!</𝖍1>
Потребителите могат да навигират в сайта ви, като напишат URL адреса. React Router има 𝑳𝒊𝒏𝒌 елемент, който ще ви предостави връзка, върху която можете да щракнете. Трябва да го използвате за всеки компонент.
