получение ошибки: проверьте метод рендеринга `AuthProvider`

Question

Привет, я еще новичок в реакции. У меня возникла проблема и ошибка:

Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получила: undefined. Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена

.

Я создал компонент auth, и в сообщении об ошибке указано, что «Проверить метод визуализации AuthProvider» Я подозревал, что ошибка происходит из-за функции «AuthProvider» в компоненте auth, и я не уверен, как ее решить.

снимок экрана: https://imgur.com/CC7uO6A

auth. js

import React, { useReducer, createContext } from "react";


const AuthContext = createContext({
  user: null,
  login: (userData) => {},
  logout: () => {},
});

function authReducer(state, action) {
  switch (action.type) {
    case "LOGIN":
      return {
        ...state,
        user: action.payload,
      };
    case "LOGOUT":
      return {
        ...state,
        user: null,
      };
    default:
      return state;
  }
}

function AuthProvider(props) {
  const [state, dispatch] = useReducer(authReducer, { user: null });

  function login(userData) {
    dispatch({
      type: "LOGIN",
      payload: userData,
    });
  }

  function logout() {
    dispatch({ type: "LOGOUT" });
  }

  return (
    <AuthContext.provider
      value={{ user: state.user, login, logout }}
      {...props}
    />
  );
}

export { AuthContext, AuthProvider };

app. js

//import from react library
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";

//import from component folder
import { AuthProvider } from "./config/auth";
import Dashboard from "./dashboard/pages/Dashboard";
import Signin from "./login/pages/Signin";
import AdminPage from "./admin/pages/AdminPage";
import Login from "./login/pages/Login";

// import AssetPage from './asset/pages/AssetPage'
// import MaterialTables from './component/MaterialTable'

function App() {
  return (
    <>
      <AuthProvider>
        <Router>
          <Route exact path="/" component={Login} />
          <Route path="/dashboard" component={Dashboard} />
          <Route path="/admin" component={AdminPage} />
          {/* <Route path="/login" component={Login} /> */}

          {/* <Route path="/asset" component={AssetPage}/> */}
        </Router>
      </AuthProvider>
    </>
  );
}

export default App;