Файл конфигурации json Keycloak, React и Маршрутизатор 4

Question

Я использую React (16.3.2) с TypeScript (2.8.3), Keycloak-js (3.4.3) и React Router 4 (4.2.2) вместе.Вот инициализация Keycloak:

const auth = Keycloak('./../keycloak.json');
const init = () => {
  return auth.init({ onLoad: 'login-required', checkLoginIframe: false });
};

Файл keycloak.json хранится в папке public . Я выполняю инициализацию Keycloak перед методом ReactDOM.render:

import { init } from './auth';
init()
  .success((authenticated: boolean) => {
    if (authenticated) {
      ReactDOM.render(
        <Provider store={store}>
          <App />
        </Provider>,
        document.getElementById('root') as HTMLElement
      );
    } else {
      console.log('not authenticated');
    }
  })
  .error(() => {
    console.log('failed to initialize');
  });

Затем приложение (ThemeProvider происходит из стилевых компонентов):

const App: React.SFC<Props> = ({ theme }) => {
  return (
    <BrowserRouter>
      <ThemeProvider theme={theme}>
        <Switch>
          <Redirect from="/" exact={true} to="/books" />
          <Route path="/books" component={BooksList} />
          <Route component={Error404} />
        </Switch>
      </ThemeProvider>
    </BrowserRouter>
  );
};

Затем BooksList:

const BooksList: React.SFC<RouteComponentProps<void>> = ({ match }) => {
  return (
    <ColumnView>
      <Switch>
        <Route path={match.url} component={List} />
      </Switch>
      <Switch>
        <Route path={match.url} exact component={EmptyView} />
        <Route path={match.url + '/details/:id'} component={BookDetails} />
        <Route component={Error404} />
      </Switch>
    </ColumnView>
  );
};

Когда я открываю свой веб-сайт по URL localhost: 3000 все работает как надо.Keycloak отображает страницу входа, и я могу перемещаться по всему сайту.Проблема возникает, когда я хочу ввести другой URL-адрес, набрав его в браузере, например localhost: 3000 / books / details / 11 .Внезапно Keycloak начинает поиск файла keycloak.json в совершенно другом каталоге - не localhost: 3000 / keycloak.json , а localhost: 3000 / books / details / keycloak.json .

Кажется, что проблема не существует, когда я записываю локализацию файла конфигурации в виде:

const auth = Keycloak('./../../../keycloak.json');

Где число '../' зависит от того, насколько вложенным является мой маршрутизатор,Это все исправляет.

Answer 1

Так что решение довольно простое - мне пришлось удалить одну точку перед URL инициализации, чтобы сделать прямой путь не относительным:

const auth = Keycloak('/../keycloak.json');