我已经为 React Web 应用程序使用了 create-react-app 入门工具包。
//Route.js
<Route path='/dashboard' component={Dashboardpage}>
<Route path='editprofile' component={Editprofile} />
<Route path='changepassword' component={changepassword} />
</Route>
//Dashboardpage.js
render()
{
return(
............
............
<div className="center-block">
<h4 className="text-center margin-top-10"><Link to="/dashboard
/editprofile">Edit Profile</Link></h4>
</div>
<div className="center-block">
<h4 className="text-center margin-top-10"><Link to="/dashboard
/changepassword">Change Password</Link></h4>
</div>
{this.props.children}
............
............
)
}
在加载仪表板时,仪表板页面会呈现一些静态内容以及两个链接编辑配置文件和更改密码。但是在单击编辑配置文件时,路径 /dashboard/editprofile 会被调用,但仪表板页面(即父组件)再次与子组件(即 editprofile)一起呈现,因此会发生闪烁。
即使该组件没有更改,父组件(即editprofile)也会重新渲染。请帮助我解决如何避免闪烁或在未发生更改时避免重新渲染父组件。