GitHub Pages みたいに、 https://mika-f.github.io/hoge/ という URL しか使えないとき、
React Router で /hoge をルートとして扱いたかった。
バージョンとかは以下の通り。
history@2.1.2 react-redux@^5.0.2 react-router@^2.8.1 react-router-redux@^4.0.6 @types/history@2.0.44
置きたい場所は、 https://mika-f.github.io/firis/ とします。
ソース (TypeScript です)
import { createHistory } from "history";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRouterHistory} from "react-router";
import { syncHistoryWithStore } from "react-router-redux";
import { Root } from "./containers/Root";
import { configureStore } from "./store/configureStore";
const browserHistory = useRouterHistory(createHistory)({
basename: "/firis" // ここにパスを指定する
});
let state = initialState;
const store = configureStore(browserHistory as any, state); // tslint:disable-line:no-any
const history = syncHistoryWithStore(browserHistory, store);
ReactDOM.render(
<Root store={store} history={history} />,
document.getElementById("root")
);
このとき、 Root は、 React Router のルーティングを定義しているだけ。
<Route path="/" component={App}> <IndexRoute component={Index} /> <Route path="about" component={About} /> </Route>
参考: