Question

我将React（16.3.2）与TypeScript（2.8.3），Keycloak-js（3.4.3）和React Router 4（4.2.2）结合使用。这是Keycloak init：

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

keycloak.json文件存储在 public 文件夹中我在ReactDOM.render方法之前做了Keycloak初始化：

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');
  });

然后App（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');

＆＃39; ../&# 39;取决于我的路由器嵌套了多少。这解决了一切。

Answer 1

因此解决方案非常简单 - 我必须删除初始化URL前面的单个点，以使路径直接不相对：

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

Keycloak json配置文件，React和Router 4

1 个答案: