Если вы знакомы с традиционной веб-разработкой, где у вас есть разные HTML-файлы для разных URL-адресов, маршрутизация в мире одностраничных приложений может сбивать с толку.
Перестаньте говорить мне, что в вашем так называемом одностраничном приложении есть только одна страница. Я щелкаю по вашему сайту и могу сказать, что там больше одной «страницы», сэр!
— A Very Confused Me
Когда я начал заниматься современной разработкой, во многих объяснениях, которые я нашел, использовалось много технического жаргона наряду с техническим жаргоном React / Angular / Anything. Поэтому я написал эту статью как более практическое объяснение.
Как мы это делали
Допустим, у вас есть традиционный сайт с набором файлов HTML, CSS и JS, и вы просто разместили его на стандартном веб-сервере. Если вы затем посетили сайт с таким URL-адресом, как http://www.yoursite.com/some/path, веб-сервер фактически просмотрит файлы и папки на сервере. Он будет искать папку с именем some, а затем файл внутри нее с именем path. Большинство веб-серверов затем попытаются сделать еще одну вещь, если не смогут найти там файл. Они также проверят наличие /some/path/index.html. Допустим, по этому пути к папке есть файл. Веб-сервер считывает его содержимое и отправляет в браузер. Простой! Это как поиск файлов на вашем компьютере!
Как мы это делаем сейчас
Однако в случае одностраничного веб-приложения, такого как клиентское приложение React или Angular. На пути /some/path или /some/path/index.html ничего нет. Если вы когда-либо просматривали скомпилированное содержимое вашего веб-приложения, вы, вероятно, увидите только index.html и набор файлов JS и CSS. Когда вы щелкаете по своему приложению, тот факт, что URL-адрес может показывать пользователю /some/path, в основном является симуляцией. Это создает у пользователя впечатление, что он перемещается между страницами. На самом деле код JS просто обновляет содержимое существующей страницы и указывает браузеру отображать /some/path в качестве маршрута. Браузер предоставляет некоторые команды JS, называемые History API, чтобы позволить вашему коду JS делать это. В мире React вы, вероятно, используете React Router, который выполняет эту манипуляцию за вас.
