javascript - 我正在尝试使用 react 钩子(Hook) useContext() 但它不起作用

Question

我是第一次尝试使用 useContext Hook ，但我没有在屏幕上显示名称，我以前从未使用过 useContext，所以请对我的错误进行一些解释，我们将不胜感激。这是代码:(编辑:添加了 App.js)

AuthContext.js

const AuthContext = createContext()


export default AuthContext;


export const AuthProvider = ({children}) => {
    return (
        <AuthContext.Provider value={{'name':"Dennis"}}>
            {children}
        </AuthContext.Provider>
    )
}

Header.js

import React, { createContext, useContext } from 'react'
import { Link } from 'react-router-dom'
import AuthContext from '../context/AuthContext'


const Header = () => {
  let { name } = useContext(AuthContext)
  return (
    <div>
        <Link to="/">Home</Link>
        <span>  </span>
        <Link to="/login">Login</Link>
        <h1>Hello {name}</h1>

    </div>
  )
}

export default Header

App.js

import './App.css';
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
import HomePage from './pages/HomePage';
import LoginPage from './pages/LoginPage';
import Header from './components/Header';
import PrivateRoute from './utils/PrivateRoute'
import AuthProvider from './context/AuthContext';


function App() {
  return (
    <div className="App">
      <BrowserRouter>
      <AuthProvider>
        <Header />
          <Routes>

            <Route path="/" element={ <PrivateRoute> <HomePage /> </PrivateRoute>} />
            <Route path="/login" element={<LoginPage />} />
            
          </Routes>
        </AuthProvider>
      </BrowserRouter>
    </div>
  );
}
export default App;

我添加了错误截图

Answer 1

import AuthProvider from './context/AuthContext';

您必须像下面那样导入 AuthProvider 而不是上面的内容，因为您在 AuthContext.js 中使用了 AuthProvider 的命名导出文件。

import { AuthProvider } from './context/AuthContext';