NavLink 在 react-router-dom 中不清除以前加载的组件数据

Question

我的索引.js文件看起来像这样。

<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<div>
<Header title={"IBP"}/>
<div className="container-fluid">
<Route exact path="/" component={HomePage} />
<Route exact path="/observation/list" component={App} />
</div>
<Footer />
</div>
</BrowserRouter>   </Provider>
<Header /> contain nav data.
<Footer /> contain footer data

标题包含用于导航的链接，看起来像这样

<li className="dropdown">
<a href="#" className="dropdown-toggle" data-toggle="dropdown">Observation <span className="caret"></span></a>
<ul className="dropdown-menu" role="menu">
<li><NavLink to="/Observation/list">Observations</NavLink></li>
<li><a href="#">Checklists</a></li>
<li><a href="#">Datasets</a></li>
</ul>
</li>

主页组件和应用程序组件具有要在页眉组件和页脚组件之间显示的数据。

现在的问题是：

如果我在"/"和"/观察/列表"之间导航，则组件的存储数据不会清除。 我希望一旦我在"/observation/list"上，并从这里通过标题组件中的 NavLink 转到"/"，所有数据都必须从应用程序组件中清除。

匿名行为：

如果我在标题组件中用 Href 替换导航链接，一切都可以正常工作。

Answer 1

我通过使用 componentWillunmount 方法解决了上述问题，一旦给出 componet unMount，该方法将清除您的状态。

>  componentWillUnmount(){
>        
>        //clear the page
> 
>       }

那些使用 redux 作为状态管理器的人，他们需要创建动作创建器，将状态值设置为化简器中的默认值。

Answer 2

实现此目的的最简单方法是使用 Life-cycle 事件组件 DidMount((。由于每次挂载组件时都会触发此事件，因此您可以创建一个方法来清除状态(数据(并在 componentDidMount(( 中调用它。

componentDidMount(){
//Clear your data
}