Как исключить определенные пути из обработки React Router'ом?

Question

[Ziggy Pop]

Имеется SPA на React, роуты которого обрабатываются при помощи react-route (и react-router-redux), примерно так:

ReactDOM.render(
      <Provider store={store}>
        <ConnectedRouter history={history}>
              <Switch>
                <Route exact path="/" render={() => <Services />} />
                <Route path="/accounts" render={() => <div>Accounts</div>} />
                <Route render={() => <div>404</div>} />
              </Switch>
            </Content>
          </Layout>
        </ConnectedRouter>
    </Provider>,
   document.getElementById("root")
);

Как только пользователь заходит на любой из адресов на сервере, браузер запускает сервисворкер, который перехватывает все адреса в адресной строке и соответственно рендерит определенные данные на стороне клиента.

Но кроме этого на сервере есть роуты, которые которые обрабатывает и отдает непосредственно бэкенд, вроде адресов /api и /api/documentation.

Сервисворкер ничего о существовании этих адресов не знает, и просто перекидывает на рендер «404». Как ему объяснить, что делать ничего не нужно, а просто нужно перекинуть на указанные адреса? Идеально было бы, если бы можно было бы сделать что-то такое вроде:

<Route path="/api/*"  render={ document.location.replace(history.location.pathname)} />

Но, к сожалению, при таком решении «в лоб» происходит просто циклический редирект. Знающие люди, подскажите, пожалуйста, как можно обойти эту досадную проблему?

Comments

[Ziggy Pop]

хорошим делом было бы выделить для api поддомен

Ну, к сожалению. тут не я музыку заказываю, работаем с тем, что есть.

каким вообще образом фильтруете, какой урл прокидывать клиенту, а какой северу?

Егор Скороходов, как раз в этом и состоит проблема. Пока применил такое решение: взял из билда SPA файл `service-worker.js`, и отредактировал его, добавив выход из него в случае обработки урла `/api/*` :

self.addEventListener("fetch", function(t) {
+    if (event.request.url.match("^.*(/api/).*$")) {
+      return false;
+    }
    if ("GET" === t.request.method) {
      var e,

Подмену штатного сервис-воркера на кастомный делаю пакетом `cra-append-sw`, изменив в `package.json` строку сборки:

"build": "react-scripts build && cra-append-sw ./service-worker.js",

Хак достаточно грубый, но в целом работает