react-router-dom 中的 NavLink 未清除先前加载的组件数据。答案

【问题标题】：NavLink in react-router-dom not clearing the previously loaded component data.react-router-dom 中的 NavLink 未清除先前加载的组件数据。
【发布时间】：2017-08-23 17:58:41
【问题描述】：

我的 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>

HomePage 组件和 App 组件有数据显示在 Header 组件和 Footer 组件之间。

现在的问题是：

如果我在“/”和“/observation/list”之间导航，组件的存储数据不会被清除。我希望一旦我在“/observation/list”上并从这里通过标题组件中的 NavLink 转到“/”，所有数据都必须从 App 组件中清除。

匿名行为：

如果我在 Header 组件中将 NavLink 替换为 Href，则一切正常。

【问题讨论】：

标签： reactjs redux

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

最简单的方法是使用生命周期事件componentDidMount()。由于每次挂载组件时都会触发此事件，因此您可以创建一个方法来清除您的状态（数据）并在 componentDidMount() 中调用它。

componentDidMount(){
  //Clear your data
}

【讨论】：