不支持直接渲染<Context>，并将在未来的主要版本错误中删除

Question

我收到以下错误：

警告：不支持直接渲染，并将在未来的主要版本中删除。您的意思是渲染 <Context.Consumer> 吗？

这是我的 app.js 组件：

import React from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "./components/Navbar";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./pages/Home";
import SignInSide from "./components/SignInSide";
import AboutUs from "./pages/AboutUs";
import ourservices from "./pages/OurServices";
import portfolio from "./pages/portfolio";
import SignUp from "./components/signup";
import booking from "./pages/book";
import PreviousBookings from "./pages/PreviousBookings";
import BookingContext from "./context/bookings/BookingContext";
function App() {
return (
<>
  <BookingContext>
    <Router>
      <Navbar />
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/aboutus" component={AboutUs} />
        <Route path="/ourservices" component={ourservices} />
        <Route path="/developer" component={portfolio} />
        <Route path="/login" component={SignInSide} />
        <Route path="/signup" component={SignUp} />
        <Route path="/booking" component={booking} />
        <Route path="/booking-history" component={PreviousBookings} />
      </Switch>
    </Router>
  </BookingContext>
</>
 );
 }

export default App;

我正在尝试使用 useContext 挂钩。

Answer 1

我的解决方案正在改变：

import AuthProvider from "./context/AuthContext";

到：

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

我是 React 新手，可能是因为 AuthProvider 不是默认导出