JavaScript

Как работает react-router-dom?

Недавно попробовал данный пакет, очень понравилось, появился такой вопрос. Как реализуется смена url без перезагрузки страницы под капотом (чистый жс)? Ведь если менять location y window, то страница перезагружается.
K*
Kanat ***
6 773
через
  history.pushState() 
TT
Tezo Tz
59 846
Лучший ответ
ак работает react-router-dom?

React-router-dom - это библиотека React, которая позволяет создавать одностраничные приложения с маршрутизацией. Она работает следующим образом:

React-router-dom отслеживает состояние истории. История представляет собой массив объектов, каждый из которых представляет собой состояние истории в определенный момент времени. Каждый объект истории содержит следующие свойства:

pathname: Путь URL.
search: Строка запроса URL.
hash: Фрагмент URL.
state: Любое состояние, связанное с историей.
Когда пользователь щелкает по ссылке, React-router-dom изменяет состояние истории, используя метод push() или replace(). Метод push() добавляет новый объект в историю, а метод replace() заменяет текущий объект в истории.

Когда React-router-dom изменяет историю, он вызывает метод render() на компоненте Router. Компонент Router использует состояние истории для отображения соответствующего контента в DOM.

Как реализуется смена url без перезагрузки страницы под капотом (чистый жс)?

Чтобы понять, как это работает без перезагрузки страницы, важно понять, как работает история в чистом JavaScript.

История в чистом JavaScript представляет собой массив объектов, каждый из которых представляет собой состояние истории в определенный момент времени. Каждый объект истории содержит следующие свойства:

pathname: Путь URL.
search: Строка запроса URL.
hash: Фрагмент URL.
state: Любое состояние, связанное с историей.
Когда пользователь щелкает по ссылке, браузер изменяет историю, добавляя новый объект в массив. Этот новый объект содержит путь URL, который соответствует ссылке, которую пользователь щелкнул.

React-router-dom использует историю в чистом JavaScript для отслеживания состояния истории. Когда пользователь щелкает по ссылке, React-router-dom изменяет историю, используя метод push() или replace(). Это изменение истории вызывает метод render() на компоненте Router, который обновляет DOM, чтобы отразить новое состояние истории.

Таким образом, React-router-dom может менять URL без перезагрузки страницы, потому что он не загружает новую страницу. Вместо этого он просто изменяет состояние истории, которое затем используется для обновления DOM.

Почему если менять location y window, то страница перезагружается?

Если напрямую изменить свойство location объекта window, браузер будет думать, что пользователь изменил адрес в адресной строке. В результате браузер будет загружать новую страницу из указанного URL.

Чтобы избежать перезагрузки страницы, необходимо изменить состояние истории. Это можно сделать с помощью метода push() или replace() объекта history.

Дополнительные замечания:

React-router-dom также предоставляет другие возможности маршрутизации, такие как маршрутизация по компонентам и маршрутизация по состоянию.
React-router-dom также может использоваться для создания многостраничных приложений.
Здравствуйте, так называемый react-router-dom работает исправно. Хорошего пользования!
Evgeniy Zaycev
Evgeniy Zaycev
189