【IT】React学習（Vite）での警告（Fast refresh only works when a file only exports components.）

皆さま
こんにちは

今日は、React（Vite）でコーディング中に
VSCodeで警告となっておりましたので修正します。

// src/context/index.jsx

import { useState } from "react"
import { useNavigate } from "react-router-dom"


export const AppContext = createContext()
             ~~~~~~~~~~~
　　　　　　
const ContextProvider = (props) => {

警告内容は、
「Fast refresh only works when a file only exports components. Move your React context(s) to a separate file.eslint(react-refresh/only-export-components)」

「Fast Refreshは、Reactアプリの開発中にページをリロードせずにUIを更新できる機能。
Fast Refreshは「コンポーネントだけをエクスポートしているファイル」に対してのみ動作します。
そのため、そのファイル内でコンポーネント以外をのもの（例えばContextやカスタムフックなど）をエクスポートしようとすると
Fast Refreshは、正しく動作しなくなることがあるため、警告としております。」

警告となっている「export const AppContext = createContext()」
別ファイルに定義します。

src/context/AppContext.js (新規作成）

// src/context/AppContext.js

import { createContext } from "react"

export const AppContext = createContext()

src/context/index.jsx

import { useState } from "react"
import { useNavigate } from "react-router-dom"


//export const AppContext = createContext()
import { AppContext } from "./AppContext"　→別出ししたファイルを読込む

他のファイルもAppContextの読み込み先を変更します。

// Form.jsx

import { useContext } from "react"
//import { AppContext } from "../context"
import { AppContext } from "../context/AppContext"　→変更

const Form = () => {

これで警告が消えました。

では