Контекст React теряется после перенаправления

Создание контекста

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, т.е. в рендере нет потребительских тегов.

Что здесь означает navigate? В вашем приложении или полностью обновите страницу?

Solo 29.11.2018 03:24

Либо я нажимаю на вариант навигации, который использует маршрут для загрузки другой страницы, либо просто меняю URL-адрес для изменения страниц.

GrepThis 29.11.2018 15:57

что вы имеете в виду под the context is lost? означает ли это, что ценность пользователя потеряна? Вы можете показать нам свой компонент UserProfile?

MaieonBrix 29.11.2018 16:03

Состояние установлено на null, как будто я никогда не входил в систему.

GrepThis 29.11.2018 16:21

Вы когда-нибудь находили решение этой проблемы?

prestonsmith 25.03.2019 20:17

@prestonsmith Да, я добавил файлы cookie в свое приложение. Единственная причина заключалась в том, что все дерево DOM перестраивалось на моем локальном хосте. (ошибка новичка)

GrepThis 09.04.2019 14:59

Можете ли вы детально проработать решение abit, так как я тоже здесь застрял

death stranding 13.06.2020 06:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
4
7
2 108
0

Другие вопросы по теме