初めに

Reactの学習のためにReact + Rails で小さなアプリケーションを作成しています。
ログインしたユーザーの情報をグローバルに持ちたかったのでContextを使ってみたらうまく動かず少し時間を溶かしてしまったのでメモ。
誰かの役に立ちますように。

Contextとは

親から子にデータをpropsとして渡すのが基本ですが、親のデータをひ孫で使いたいだけなのに子、孫とpropsを渡すのは大変。というときに親のデータをひ孫でもpropsのリレーをしないで使えるようにする方法です。
VueでいうところのProvide,inject

エラー: [Context.Provider] is not a route component

ドキュメントや多くの記事を参考に以下のように実装してみたところ題名のエラーが発生しました。

import { createContext } from 'react';
import { Route } from 'react-router-dom';
import Home from './components/Home'

export const UserData = createContext()

function App() {
  return (
    <div style={{ textAlign: 'center' }}>
      <Route path="/" element={<Top />} />
      <UserData.Provider value={"ほげ太朗"}>
        <Route path="/home" element={<Home/>}>
      </UserData.Provider>
    </div>
  );
}

export default App;

解決法

import { createContext } from 'react';
import { Route } from 'react-router-dom';
import Home from './components/Home'

export const UserData = createContext()

function App() {
  return (
    <div style={{ textAlign: 'center' }}>
      <Route path="/" element={<Top />} />
      <Route path="/home" element={
        <UserData.Provider value={"ほげ太朗"}>
          <Home />
        </UserData.Provider>
      }/>
    </div>
  );
}

export default App;

Routerを使っているから公式ドキュメントとかのまるっと参考にしてはいけなかったのかも？

参考

https://stackoverflow.com/questions/73220330/how-can-i-solve-context-provider-is-not-a-route-component-error-in-react