Как использовать маршруты React вместо экспресс

Question

Я много гуглю, и большинство пользователей сталкиваются с моей проблемой.

У меня есть сборка приложения React + Express с веб-пакетом, и у меня есть реагирующие маршруты, и я хочу их использовать, но когда я пытаюсь что-то получить, они переходят в приложение Express.

Я проверял это раньше со стандартным значением из поля create-react-app, и оно работало. Сейчас я создаю собственную сборку с помощью веб-пакета и не могу понять, как заставить его работать.

Мои маршруты:

<BrowserRouter>
    <Switch>
        <Route exact path='/' component={App}/>
        <Route exact path='/login' component={Login}/>
        <Route exact path='/reg' component={Register}/>
    </Switch>
</BrowserRouter>

Я думал, что это можно решить с помощью registerServiceWorker.js, но не уверен, как это работает.

Answer 1

Когда вы выполняете фактический сетевой запрос (полная загрузка страницы, например, привязка <a href="/login">Login</a> или вызов AJAX), браузер связывается с экспресс-приложением, которое, в свою очередь, разрешает URL-адрес и сопоставляет его с функцией.

react-router маршруты существуют только внутри приложения JS и требуют других способов навигации, вместо HTML-тега <a/> вы можете использовать <Link/> реагирующий компонент.
Есть, конечно, программные способы навигации между маршрутами, такие как изменение различных history объектов, предоставленных react-router

основная проблема заключается в том, что приложение-экспресс (сервер) никак не знает о маршрутах реагирования и может иметь собственный набор маршрутов. Хорошей практикой было бы установить маршрутный символ (*) на сервере, который будет запущен для всех запросов и вернет основной html-файл в браузер, браузер, в свою очередь, загрузит приложение реагирования, что позволяет реагирующему маршрутизатору разрешить URL-адрес и отобразить нужный компонент.