reactjs - NavLink in react-router-dom not clearing the previously loaded component data. -
my index.js file this.
<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
header contain link navigation this
<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 component , app component have data show in between header component , footer component.
now question is:
if navigate between "/" , "/observation/list" store data component not clearing out. want once on "/observation/list" , here goes "/" through navlink in header component, data must clear out of app component.
anonymous behaviour:
if replace navlink href in header component everthing working fine.
i solve above problem using componentwillunmount method, going clear state once give componet unmount.
> componentwillunmount(){ > > //clear page > > }
those using redux state manager, need create action creater, going set state value default value in reducers.
wiki
Comments
Post a Comment