我有以下问题:我有一个通用组件,其中包含来自redux存储的一些数据,我希望在用户访问另一条路线时清除这些数据。
<Route path="/create/gallery" element={<CreatePage type={ContentType.gallery}/>} />
我也有一些更多的代码,保存我输入的数据到存储
saveGeneralInfo = (field: string, value: string) => {
const data = {};
data[field] = value;
this.props.dispatch(saveGeneralInfo(data));
}
如果用户离开页面或访问任何其他链接,我如何清除状态?(例如从页眉)
if(this.state.keycloak) {
if(this.state.authenticated) return (
<div className="App">
<Header/>
<Routes>
<Route path="/" element={<Content />} />
<Route path="/sites"/>
<Route path="/users"/>
<Route path="/create/gallery" element={<CreatePage type={ContentType.gallery}/>}/>
<Route path="/create/article" element={<CreatePage type={ContentType.article} />} />
<Route path="/create/quiz" element={<CreatePage type={ContentType.quiz} />} />
</Routes>
</div>
);
else return (
<div>Can't authorize</div>
)
}
2条答案
按热度按时间t2a7ltrp1#
您必须在每个路由根组件中提供
unMount
生命周期事件触发的存储清除功能。如果使用功能组件:
在我的例子中,我为每个页面URL(如
/info
或/user
)重置我的商店的一部分,商店看起来像oo7oh9g92#
可以使用子组件创建路径控制器
你就得把主要的部分