Создание контекста
export default React.createContext({
user:null,
login:()=>{}
})
Контроллер контекста
export default class ContextHandler extends Component{
state = {
user: null,
}
logout = () => {
this.setState({
user: null
})
}
login = user => {
this.setState({
user: user
})
};
render(){
return(
<AuthContext.Provider value={{ user: this.state, login: this.login, logout: this.logout }} >
{this.props.children}
</AuthContext.Provider>
)
}
}
App.js
class App extends Component{
render() {
return (
<BrowserRouter>
<div>
<Switch>
<Route path="/" exact component={Header} />
<Route path="/login" exact component={Login} />
<Route path="/profile" exact component={UserProfile} />
<Route path="/inputform" exact component={InputForm} />
</Switch>
</div>
</BrowserRouter>
)
}
}
export default App;
index.js
ReactDOM.render((
<ContextHandler>
<App/>
</ContextHandler>
),
document.getElementById('root'));
registerServiceWorker();
ПользовательСтраница профиля
componentDidMount() {
if (!this.context.user) {
return ( <Redirect to = "/login"/> )
}
else{
this.setState({
loading:true
})
getUserEntries(this.context.user.token,(entries)=>{
if(entries !== null){
this.setState({
userEntries:entries
})
}
})
}
}
render() {
let samples, producers
if(!this.context.user){
return(
<Redirect to="/login"/>
)
}
if (this.state.userEntries) {
samples = (this.buildList(this.state.userEntries.samples))
producers = (this.buildList(this.state.userEntries.producers))
}
После входа в систему меня перенаправляют на страницу пользователя с правильным контекстом.Как только я перехожу на другую страницу и пытаюсь вернуться на страницу профиля пользователя, контекст теряется.и мне нужно снова войти в систему ??
Только два компонента, потребляющие контекст, - это панель навигации и страница профиля пользователя.Примечание. Я использую новый контекстный API 16.6, то есть при отображении нет пользовательских тегов.