Выбор типа маршрутизатора в приложениях React

Привет, ребята 👋, надеюсь, у вас отличный день. Я собираюсь рассказать о различных преимуществах и недостатках маршрутизаторов в react-router и о том, как их выбрать.

Есть три типа маршрутизаторов, которые указаны в react-router. Мы подробно рассмотрим каждый из них позже:

1. Маршрутизатор браузера
Использует все, что находится после TLD (.com, .in, .co и т. Д.) Или порта как path. В localhost:3000/xyz /xyz - это path.

2. Маршрутизатор хеширования
Использует все, что находится после# как path. В localhost:3000/#/xyz /xyz - это path.

3. Маршрутизатор памяти
Не использует URL-адрес для отслеживания навигации, это совершенно другая игра.

Давайте перейдем к подробному рассмотрению различных маршрутизаторов.

Хеш-маршрутизатор

Теперь, когда мы понимаем основы хэш-маршрутизатора, давайте посмотрим на код.

import { HashRouter, Route } from 'react-router-dom';

function App() {
    return (
        <HashRouter>
            <Route path="/" exact component={page1} />
            <Route path="/page2" component={page2} />
        </HashRouter>
    );
}

У нас есть компонент App(), в котором мы возвращаем HashRouter с некоторыми маршрутами. У меня есть 2 компонента page1 и page2, которые возвращают h1. Если вы запустите наше маленькое приложение в браузере, вы обнаружите, что реагирующий маршрутизатор автоматически добавляет # перед path.

Вот и все. Это основное визуальное отличие браузерного маршрутизатора от хэш-маршрутизатора. Я знаю, что добавление # кажется не очень актуальным, но для этого есть веская причина.

Маршрутизатор памяти

Я как бы пропустил, как маршрутизаторы памяти работают за кулисами. Реагирующий маршрутизатор хранит историю URL-адресов, но не обновляет адресную строку. Давайте посмотрим на пример

Я использую тот же компонент App(), что и выше, с одним крошечным изменением.

import { MemoryRouter, Route } from 'react-router-dom';

function App() {
    return (
        <MemoryRouter>
            <Route path="/" exact component={page1} />
            <Route path="/page2" component={page2} />
        </MemoryRouter>
    );
}

Кроме того, я добавляю компонент Link к своим компонентам page1 и page2.

import { Link } from 'react-router-dom';

function page1() {
    return (
        <div>
            <div>Page 1</div>
            <Link to="/">Go to Page 2</Link>
        </div>
    );
}

function page2() {
    return (
        <div>
            <div>Page 2</div>
            <Link to="/page2">Go to Page 1</Link>
        </div>
    );
}

Если вы запустите приложение, вы обнаружите, что визуализируемые компоненты отличаются, а ссылки работают, однако URL-адрес не изменяется.

Сравнение

Маршрутизатор браузера часто бывает очень сложно развернуть. Многие хостинг-провайдеры предполагают, что мы используем такую ​​маршрутизацию и упрощаем процесс. Позвольте мне объяснить, почему это так:

Традиционный сервер не понимает /page1. Однако обычный сервер развертывания свяжется с нашим сервером и вернет ошибку 404, поскольку /page1 для него является тарабарщиной.

Вы можете подумать: «Как работает наш сервер разработки приложений create-response-app?». Сервер разработки create-response-app сначала проверит, есть ли какие-либо ресурсы для разработки (файл js, файл CSS и т. Д.) С /page1. Затем он проверит общую папку. Если ничего из этого не было выполнено, он будет обслуживать файл index.html (связанный с нашим JSX, маршрутизаторами и т. Д.). Наши маршруты затем подхватят это и предоставят соответствующий контент (маршрутизация на стороне клиента).

Хватит браузерных роутеров, давайте поговорим о хэш-роутерах. Мы можем легко настроить наш сервер так, чтобы он игнорировал # и обрабатывал весь HTML-файл независимо от маршрута. Этот хеш будет использоваться нашими маршрутами для отображения соответствующего контента.

Маршрутизаторы с памятью меняют адресную строку. Это, вероятно, оставит пользователя в подвешенном состоянии, и он или она могут подумать, что его компьютер завис или что на сайте есть проблема. Это плохой пользовательский опыт.

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

На этом пока все, надеюсь, вам понравился этот пост. Поставьте лайк и подписывайтесь на меня! Пока

Первоначально опубликовано на https://dev.to 12 марта 2021 г.