reactjs - 重定向后反应上下文丢失
问题描述
创建上下文
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;
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))
}
登录后,我将被定向到具有正确上下文的用户页面。一旦我导航到另一个页面并尝试返回用户个人资料页面,上下文就会丢失。我必须重新登录??
唯一使用上下文的两个组件是导航栏和用户配置文件页面。注意:我使用的是新的 16.6 上下文 API,即渲染中没有消费者标签。
解决方案
推荐阅读
- ag-grid-react - 文本转换在 ag-grid react 中不起作用
- c# - 如何在我的 c# 项目中使用“apache org”依赖项
- sql-server - 计算十分位数的频率
- java - JPA在没有预定义实体类的情况下获取映射结果
- containers - 容器没有ip地址,我们如何从本地客户端连接到mysql服务器容器
- android - 更改一个列表中对象的属性也会影响另一个列表中的对象
- api - OpenWeather Minutely Forecast 从 One Call 中消失?
- azure - Github 对“授权回调 URL”MS Azure 的重定向过多
- reactjs - 我可以在 nextjs 中使用没有 express 的 multer 吗?
- python - 如何使用python从html中删除标签