当我在 reactjs 中将 stateprovider 包裹在一个组件周围时，我的整个项目没有显示在 localhost

如何解决当我在 reactjs 中将 stateprovider 包裹在一个组件周围时，我的整个项目没有显示在 localhost

 <Router>
      <div className='app'>
        <Authprovider>
          <Switch>
            <Route exact path='/posts'>
              <Header />
              <Posts />
              <Footer />
            </Route>
            <Route exact path='/projects'>
              <Header />
            </Route>
            <Route exact path='/about'>
              <Header />
            </Route>
            <Route exact path='/login'>
              <Login />
            </Route>
            <Route exact path='/signup'>
              <Container
                className='d-flex align-items-center justify-content-center'
                style={{ minHeight: '100vh' }}
              >
                <div className='w-100' style={{ maxWidth: '400px' }}>
                  <Signup />
                </div>
              </Container>
            </Route>
            <Route exact path='/'>
              <Header />
              <Main />
              <Footer />
            </Route>
          </Switch>
        </Authprovider>
      </div>
    </Router>

容器是从引导程序导入的。 Authprovider 是包裹所有组件的组件，以便我可以使用所有组件中的值

当我包装 authprovider 时，我的屏幕一片空白，所有数据都消失了，但控制台中没有任何错误

import React,{ useState,useEffect,useContext } from 'react'
import { auth } from './firebase'

const AuthContext = React.createContext()

export const useAuth = () => {
  return useContext(AuthContext)
}

export const Authprovider = ({ children }) => {
  const [currentuser,setcurrentuser] = useState()
  const [loading,setloading] = useState(true)
  const value = {
    currentuser,}
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setcurrentuser(user)
      setloading(false)
    })

    unsubscribe()
  },[])
  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
    </AuthContext.Provider>
  )
}

我能知道我犯的错误吗？