読者です 読者をやめる 読者になる 読者になる

みかづきメモ

学習したことのメモとか、日記とか、備忘録。

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

React TypeScript

GitHub Pages みたいに、 https://fuyuno.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://fuyuno.github.io/firis/ とします。

ソース (TypeScript です)

// index.tsx
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>

参考: