我正在使用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 文件夹中我在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');
其中'../'的数量取决于我的路由器嵌套的数量 . 这解决了一切 .
1 回答
因此解决方案非常简单 - 我必须删除初始化URL前面的单个点，以使路径直接不相对：