Въведение

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

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

Настройка на маршрути

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

Страници

Сега тук са нашите 2 страници, и двете имат връзки към връзката Login. Все още не сме ги свързали, но ще го направим по-късно.

Създайте модал

Вместо да се фокусираме върху конкретен модал, ние ще създадем такъв за многократна употреба. Ще използваме createPortal от react-dom. Не искаме да изобразяваме до document.body, така че в нашия index.html ще добавим друг div за изобразяване, на който ще дадем id от modal_root.

createPortal ще изобрази предоставения React на различно място в DOM и ще гарантира, че целият подходящ контекст също е предаден. Мислете за това като за „пренасяне на този HTML някъде другаде“. Това ви позволява да изобразите нещо, което има смисъл йерархично, но функционално трябва да съществува някъде другаде в DOM.

Обвивката div ще приложи нашия стил, така че ще бъде фиксирана div, покриваща екрана с тъмен фон. При щракване ще извика предаден метод onClick, който по-късно ще използваме за затваряне на модала.

Предаваме нашия children, което означава, че всеки React, който искаме, ще бъде изобразен в нашия модален и транспортиран до modal_root.

Създайте модален вход

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

Желаното от нас поведение е, че ако се щракне върху фона, модът се затваря. Можем да направим това с проп history, предадено от React Router.

Освен това, вместо да препраща към match.url, който е пътят, съответства на React Router. Затова вместо това използваме location.pathname, което ще върне текущия път в URL минус параметрите на заявката.

Изобразяване на маршрути на база параметри на заявка

За да работи това, трябва да изобразим нашия маршрут извън Switch. Причината, поради която това ще работи, е, че маршрутът ще се изобразява през цялото време. Доставихме му път от / и не поставихме exact проп върху него. Така че всеки път, когато маршрутът се промени в нашето приложение, този маршрут ще се визуализира отново.

Тази техника на зависимост от параметър на заявка е чудесна, когато имате много exact маршрути. Също така няма да има смисъл пътят да бъде твърдо кодиран /profile/login. Така че в зависимост от параметър на заявка е лесно решение.

Модален маршрут за влизане, базиран на заявка

Сега, след като изобразяваме нашата страница за вход, нека накараме модала LoginPage действително да зачита параметъра на заявката. Използваме URLSearchParams, който ще вземе параметрите на заявката, наричани също search част от URL адреса, и ще ни предостави куп помощници.

Грабваме нашите параметри и правим .get("login"), за да проверим съществуването на параметъра на заявката за влизане. Ако съществува, връщаме нашия модал за влизане, в противен случай нищо няма да се върне и нищо няма да се изобрази.

Това се поддържа от всички браузъри с изключение на IE. Не е необходимо да използвате URLSearchParams, можете да анализирате и осъществявате достъп до параметрите на заявката, както сметнете за добре.

Коригиране на връзки

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

Предоставяме обект и предоставяме pathname, който ще бъде нашият match.url, така че пътят, по който съпоставяме, и след това допълнително ключ search и предаваме ?login=true, така че да не е недефиниран и да се регистрира съответно с нашия URLSearchParams.

Край

Сега имаме динамичен модален маршрут, базиран на параметри на заявка. Основната техника, която трябва да вземете тук, е, че можете да изобразявате маршрути навсякъде. Не е нужно да са само на най-високо ниво Switch. Те ще се рендират, когато path бъде съпоставено, и това е, от което се възползваме тук. Можем да създадем винаги рендиращи маршрути, които ще ни позволят да създаваме тези типове интерфейси.

Можете да разгледате кода тук https://github.com/codedailyio/ReactRouterModal и или да разгледате демото на живо.

Първоначално публикувано в https://codedaily.io на 14 юли 2019 г.