Блог

Я конвертирую приложение (ранее в jQuery / HTML / CSS) в React. Приложение имеет много модулей, и каждый модуль имеет много подмодулей. Я постепенно пытаюсь обновить каждый подмодуль до React. Проблема в том, что боковой панели нет в React.

Есть два подмодуля, которые я преобразовал в React. Проблема в том, что когда кто-то нажимает на ссылку на боковой панели, вся страница перезагружается, и ресурсы снова будут загружены.

Если кто-то открыл любую из двух страниц, которые я преобразовал в React, а затем пытается перейти на другую страницу (также написанную на React), она не должна перезагружаться для нее. Это должно работать так, как будто они используют Link компонент для перемещения.

Я думал имитировать эту функцию, используя HTML5 history API. Использование history.pushState изменило URL, но react-router не отображает соответствующий компонент по этому URL.

Я знаю, что есть какой-то обходной путь с HashRouter , но вместо этого я хочу использовать BrowserRouter .

Для обеих страниц я отображаю один и тот же шаблон из серверной части и логику маршрутизации, делегированную react-router.

Для начала я создал демонстрационную версию codesandbox. Пожалуйста, настройте его и попытайтесь заставить его работать при нажатии на URL-адреса (без Link ), поскольку Link компонент ведет себя в react-router.