Reactjs react路由器dom中的NavLink未清除先前加载的组件数据。

我的index.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上，并且从这里进入/通过header组件中的NavLink，所有数据都必须从App组件中清除

匿名行为：

---

如果我在标题组件中将NavLink替换为Href，一切都会正常工作。

实现这一点的最简单方法是使用生命周期事件。由于每次装入组件时都会触发此事件，因此可以创建一个方法来清除状态数据并在componentDidMount内调用它

componentDidMount(){
  //Clear your data
}

---

我使用componentWillunmount方法解决了上述问题，该方法将在给定component unMount后清除您的状态

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

那些使用redux作为状态管理器的人，他们需要创建action creater，它将在Reducer中将状态值设置为默认值