サブディレクトリにビルドしたい
例えば記事サイトのドメインがあるとして、
/article
以下にReact
のプロジェクトを置きたいと思った時
普通にビルドして配置すると・・・
・○○.chunk.js
などの向き先が全部ドメイン直下だったり、
・Link
で遷移しようとしたら、おかしなページに行ってしまったり。
解決方法は色々出てくる
・basename='/article'
入れるらしいけど、ドコに書けばいいんだ?
・webpack.config.js
のoutput:
の中かしら?
・cross-env
でbuild
の後ろに書くのかしら?
ネットで調べるとサブディレクトリに置く方法は色々あり、どれが正解か分からないッス。
Switch
の中に書いてみたり、Route
のタグに書いてみたり、
Link
の中身のURLを書き換えてみたり、と小一時間迷ってしまいます。
結論:<App/>
を囲んでるhistoryの書き方を変える
環境によって違うかもですが、一番上の階層にあるファイルで
history
を読み込んでる所があると思います(ないかもですが)
そこを書き換えます。
yarn add history
- //import history from 'utils/history';
+ import createBrowserHistory from 'history/createBrowserHistory';
+ const history = createBrowserHistory({ basename: '/article' }); //←ココに追加する
const render = () => {
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}> //←ココに「history」がある、と思う。
<App />
</ConnectedRouter>
</Provider>,
私の場合はこれで解決しました。
create-react-app
の場合は、npmスクリプトに書くように書いてあったので、
そっちの場合はちょっとよくわからないです。
参考資料を見る限りだと、Router
やBrowserRouter
でも動きそう。
redux
がある場合<Provider>
と<App/>
でサンドイッチにする感じ。
以上です。
参考資料