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>
参考: