なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ 書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。

React Router でサブディレクトリをルートとして扱いたい

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>

参考: