<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>
Container is imported from bootstrap.
Authprovider is the component wrapped around all the components so that I can use the values in all the components
when I wrapped authprovider my screen went blank all the data is dissapeared but i didnt got any error in the console
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>
)
}
can i know the mistake i had done?
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…