【react】BrowserRouterを使って実機でビルドすると画面が描画されない件

asaba 著者:asaba

【react】BrowserRouterを使って実機でビルドすると画面が描画されない件

今開発中のReactでreact-router-domライブラリのBrowser-routerでこけました。

どのような現象かというと、npm startで起動するとコンポーネントがちゃんと描画されるのですが、yarn run buildでビルドしてから

cordova run android(browser)で反映させてた時に真っ白になります。しかもログにエラー扱いで表示されないので解決するのに時間が

かかってしまいました。

解決方法はというと、まず下記のスクショを見てください。

importでHasuRouterを定義した後に、<BrowserRouter>で<switch>タグで囲んだ遷移のリストを囲んでいるのが分かります。

本来はこれを使って<switch>タグで<Route>タグのpathと一致した場合にそのページに遷移するというベーシックな

画面遷移ですが、実機だとうまく描画してくれなかったです。

どうしようかなと思いネットを漁っていたら見つかりました解決方法が見つかりました。(リンク先は忘れてしまいました、すみません。。)

v4に移行した後は、<HushRouter>で囲むとsuccessするよー!みたいなことが書いてあったことは覚えています。

とりあえず下記の画像のようにタグ名を変えてビルドー>無事コンポーネント描画され大成功!!です。

ものすごくざっくりですが、v3で慣れていた方はこれに限らず色々と書き方が変わっていたのでv4マイナーチェンジぶりにいらいらするかもしれないですね。

詳細をうまく伝えられなかったのは残念ですが、もう少しreactに詳しくなった後に説明したいと思います。

 

 

  • この記事いいね! (0)

著者について

asaba

asaba author

最近のマイブームはプチ旅行と子供をあやすアプリを作る事です。