Создание пользовательского маршрутизатора для спа -салонов в React

Привет, ребята, я собираюсь показать вам, как создать пользовательский маршрутизатор в React. Мы будем использовать браузер История API

Как обнаружить текущий URL

Информация о URL хранится в Window.location . Это возвращает Место объект. Расположение.pathname дает нам часть URL после домена. Например, в URL – xdfjdkf.com/abc, ABC означает Расположение.pathname Анкет

Создание простого компонента маршрута

Мы можем отображать различные компоненты на основе местоположение . Мы принимаем 2 реквизита – маршрут (pathname) и детей (содержание, которое мы хотим сделать)

export function Route({route, children}) {
    return window.location.pathname === route ? children : 
    null
}

Создание компонента ссылки

Я использую по умолчанию HTML A ярлык. Наша ссылка берет 3 реквизита – href (где Ссылка должна перейти к), классное имя (для стиля), дети (что должна сказать по ссылке).

export function Link({href, className, children}) {
    return (
        {children}
    )
}

Вы можете подумать, в чем разница между использованием нашего Ссылка компонент и A ярлык? Ну, разница в том, что когда мы нажимаем на A Тег, происходит перезагрузка страницы, которая побеждает цель создания маршрутизатора для спа -салона (приложение для одной страницы).

Чтобы предотвратить это, давайте настроим слушателя событий для обработки событий. Мы позвоним e.preventdefault () Чтобы предотвратить действие по умолчанию (перезагрузка страницы). Вместо этого мы будем использовать window.history.pushstate () Метод изменения URL.

Метод истории.pushstate () добавляет запись в стек истории сеанса браузера.

export function Link({href, className, children}) {
    const handleClick = (e) => {
        e.preventDefault();
        window.history.pushState({}, '', href);
    }

    return (
        {children}
    )
}

На этот раз, когда мы пробуем это, URL меняется, но визуализированный компонент не меняется. Это связано с тем, что остальная часть приложения не понимает, что URL изменился. Чтобы сделать это, мы отправимся на PopstateEvent Анкет

Событие Popstate отправляется в окно каждый раз, когда активная запись в истории меняется между двумя учебными записями для одного и того же документа.

export function Link({href, className, children}) {
    const handleClick = (e) => {
        e.preventDefault();
        window.history.pushState({}, '', href);

        const event = new PopStateEvent('popstate');
        window.dispatchEvent(event);
    }

    return (
        {children}
    )
}

Теперь мы должны настроить слушателя событий в компоненте маршрутизатора для прослушивания этого события. Я собираюсь поместить это слушатель в событие в Использоватьэффект крюк. В классных компонентах я бы добавил этот метод в ComponentDidMount Анкет Мы хотим подключить это только 1 раз, поэтому я указам пустой массив для зависимостей. Мы вернем функцию из Использоватьэффект Для очистки, т. Е. Удаление слушателя событий.

export function Route({route, children}) {
    useEffect(() => {
        const onLocationChange = () => {
            //    Do something
        }

        window.addEventListener('popstate', onLocationChange);

        return () => {
            window.removeEventListener('popstate', onLocationChange);
        }
    }, [])

    return window.location.pathname === route ? children :
        null
}

Когда изменение пути изменяется, мы хотим, чтобы все компоненты маршрута повторно рендерировали. Как мы это делаем? Ты угадал! С помощью состояния.

const [currentPath, setCurrentPath] = useState(window.location.pathname); 

Сравнение, чтобы проверить, правильный ли URL Но я собираюсь установить его на CurrentPath Ради простоты.

    return currentPath === route ? children :
        null

Некоторые из вас, ребята, могут использовать CMD + клик или Ctrl + chlick Открыть ссылки в новых вкладках. Это то, что многие учебные пособия упускают. Давайте реализуем эту функциональность в нашем Ссылка составная часть.

export function Link({href, className, children}) {
    const handleClick = (e) => {
        if(e.metaKey || e.ctrlKey) {
            return;
        }

        e.preventDefault();
        window.history.pushState({}, '', href);

        const event = new PopStateEvent('popstate');
        window.dispatchEvent(event);
    }

    return (
        {children}
    )
}

Metakey означает CMD и Ctrlkey означает Ctrl Анкет Это в основном логический Значения, которые сообщают нам, нажал ли пользователь один из этих ключей, нажимая ссылку. Мы хотим вернуться рано и позволить браузеру делать свое дело.

Вот и все сейчас. Надеюсь, вам понравился этот пост. Если у вас есть какие -либо вопросы, оставьте их в комментариях, и я постараюсь ответить на них. Пока пока 👋.

Оригинал: “https://dev.to/akashshyam/creating-a-custom-router-in-react-5483”