React RouterでBasenameを指定する

2016年12月19日 · 1 min read · JavaScript React  ·
Share on:

はじめに

React Routerでルート以外の時に作成したアプリを置きたい時とかの話

1ReactDOM.render(
2    <Router history={browserHistory}>
3        <Route path="/" component={App} />
4        <Route path="/pageA" component={pageA} />
5        <Route path="/pageB" component={pageB} />
6        <Route path="/pageC" component={pageC} />
7    </Router>,
8    document.getElementById("app")
9);

みたいなルーティングをした状態でルート以外に作成したアプリを配置をしたい時の話
このままだとデプロイ先のルートにしか置けないので困る
かといってフルパスでルーティングを書くわけにもいかない

対処法

historyライブラリを使うことで解決出来る
/hogeに配置するコードはこんな感じ

 1import { createHistory, useBasename } from "history";
 2
 3let history = useBasename(createHistory)({
 4    basename: "/hoge/"
 5})
 6
 7ReactDOM.render(
 8    <Router history={history}>
 9        <Route path="/" component={App} />
10        <Route path="/pageA" component={pageA} />
11        <Route path="/pageB" component={pageB} />
12        <Route path="/pageC" component={pageC} />
13    </Router>,
14    document.getElementById("app")
15);

これで/hoge/pageAの用なルーティングを実現することが出来る

参考記事