Q:

Keycloak json configuration file, React and Router 4

I am using React (16.3.2) with TypeScript (2.8.3), Keycloak-js (3.4.3) and React Router 4 (4.2.2) together. Here is the Keycloak init:
const auth = Keycloak('./../keycloak.json');
const init = () => {
  return auth.init({ onLoad: 'login-required', checkLoginIframe: false });
};

The keycloak.json file is stored in public folder
I do Keycloak initialization before ReactDOM.render method: 
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');
  });

Then the App (ThemeProvider comes from styled-components):
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>
  );
};

Then the 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>
  );
};

When I open my website on URL localhost:3000 everything works as it should. Keycloak renders a login page and I can navigate through the whole website. The problem appears when I want to enter a different URL by typing it to the browser, for example localhost:3000/books/details/11. Suddenly Keycloak starts to search for the keycloak.json file in a very different directory - not localhost:3000/keycloak.json but localhost:3000/books/details/keycloak.json.
The problem seems to be non existent when I write the localization of the configuration file as: 
const auth = Keycloak('./../../../keycloak.json');

Where the number of '../' depends on how much nested my router is. This fixes everything.

A:

So the solution is quite easy - I had to delete the single dot in front of the initialization URL to make the path direct not relative:
const auth = Keycloak('/../keycloak.json');

