reactのチュートリアル中にハマりました。
チュートリアル中せっかくなのでアプリを画面遷移させるところまで試してみようと思い、index.jsとMyComponentをコーディングしてyarn run buildでビルド。
そしたら下のエラーに遭遇。
<span style="color: #ff0000;">Invariant Violation: You should not use Route> or withRouter() outside a Router> </span>
訳すと、ルーターの外でwithRRouterを使ってはいけません。です。
export default withRouter(MyComponent)ってスコープ内だっけと思いましたがそんな訳ないよなと思いスタックオーバーフローへ。
するとありました。解決方法と原因。めっちゃシンプルでした。↓
<BrowserRouter></BrowserRouter>を定義していない・・・だと・・・
考えてみたらコンポーネントを上記のタグで囲まない限りいつまでも場外扱いですよね。
Routerを使いたいのにRouterを定義していないならそりゃ使えないよねと(汗)反省して下記のようにindex.jsを編集しました。
画面遷移はreact-routerの使い方を理解すれば大丈夫そう。筆者もここにきてようやくstateとpropなどのライフサイクルが分かってきたので、複数のコンポーネントで値を渡していじれるようになれば少しは楽に開発できるかなと感じました。
長いですが頑張て行きたいと思います。
