Tags:

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

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={App} />
        <Route path="/pageA" component={pageA} />
        <Route path="/pageB" component={pageB} />
        <Route path="/pageC" component={pageC} />
    </Router>,
    document.getElementById("app")
);

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

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

import { createHistory, useBasename } from "history";

let history = useBasename(createHistory)({
    basename: "/hoge/"
})

ReactDOM.render(
    <Router history={history}>
        <Route path="/" component={App} />
        <Route path="/pageA" component={pageA} />
        <Route path="/pageB" component={pageB} />
        <Route path="/pageC" component={pageC} />
    </Router>,
    document.getElementById("app")
);

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

参考サイト



コメント