В част 1 създадохме само един компонент — App.jsx. Сега трябва да направим компонент за всеки елемент, който искаме да изобразим в нашето приложение. Ще създадем следните компоненти в част 2: About.jsx, Contact.jsx, Login.jsx, Signup.jsx, Header.jsx, Footer.jsx и Searchbar.jsx.
Създайте папка „Компоненти“. В тази папка създайте файлове за всеки от споменатите по-горе компоненти. Компонентите трябва да рендират нещо. С други думи, връщането не може да бъде празно, така че засега ще добавим текст на контейнер.
Във файла About.jsx декларирайте компонент на класа. В неговата функция за изобразяване декларирайте div, който изобразява текста „Относно страницата“. Направете същото за компонентите за контакт, регистрация, лента за търсене и влизане.
По същия начин декларирайте клас в компонента на заглавката. В неговата функция за изобразяване декларирайте div с ul таг, който влага li тагове за всеки бутон на менюто, който искаме да имаме. Можете също да добавите заглавен таг със заглавие за вашата начална страница. Можете да стилизирате елементите от менюто както желаете (като бутони, или икони, или просто текст).
Реших да поставя бутона за регистрация в компонента за влизане вместо в заглавката. Можете да оставите регистрацията си в заглавката, ако решите!
Добавете текст или ul таг (което искате да изобразите) към компонента на долния колонтитул.
След като нашите компоненти са настроени, можем да добавим навигация към всеки елемент от менюто. Така че когато потребител щракне върху бутона About в заглавката, About.jsx ще се изобрази.
За да активираме реагиращия рутер, ще използваме маркери Route и Link. За да започнем, ще трябва да направим някои промени във файла index.js.
Първо импортирайте всеки компонент, към който планираме да добавим навигация — всеки бутон в нашата лента с менюта (за, контакт, влизане, регистрация).
След това декларирайте функция - ще я наречем „маршрутизиране“. В тази функция ще декларираме маркера на Browser Router от react-router. В рамките на маркера BrowserRouter дефинирайте div, който влага маркери Route за всеки компонент в лентата с менюта. Във всеки маркер за маршрут ще дефинираме пътя, до който искаме да води бутонът, и компонента, който трябва да се изобрази, когато бутонът бъде щракнат.
В метода за изобразяване заменете ‹App/› с нашата функция за маршрутизиране. Сега окачваме тази функция към основния елемент. Поради това трябва да включим път към „/“ в нашата функция за маршрутизиране, която изобразява компонента на приложението.
Сега, когато нашите маршрути са настроени, можем да декларираме техните съвпадащи връзки.
В Header.jsx добавете етикети за връзки към всеки li елемент, който сте създали по-рано. Във всеки таг за връзка дефинирайте атрибута „до“ със съответните пътища, които сме създали във файла index.js.
Сега, когато щракнете върху някой от тези елементи, те ще отведат до пътя, който сте създали, и ще изобразят компонента, прикачен към този път.
Честито! В част 2 успешно използвахте React Router!
В следващия раздел ще разгледаме функционалността на лентата за търсене, изтегляне на данни от API и изтегляне на данни от локално хранилище.
Уведомете ме, ако имате въпроси или коментари!
