리디렉션 후 손실되는 대응 컨텍스트

리디렉션 후 손실되는 대응 컨텍스트

컨텍스트 만들기

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>
    )
}
}

앱.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;

인덱스 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))
    }

로그인하면 올바른 컨텍스트를 가진 사용자 페이지로 이동한다.다른 페이지로 이동한 후 사용자 프로필 페이지로 돌아가면 컨텍스트가 손실되고 다시 로그인해야 함?

컨텍스트를 소비하는 두 가지 구성 요소는 탐색 모음과 사용자 프로필 페이지뿐입니다.참고: 나는 새로운 16.6 컨텍스트 API를 사용하고 있다. 즉 렌더링에 소비자 태그가 없다.

참조URL: https://stackoverflow.com/questions/53530624/react-context-being-lost-after-redirect