时间戳

首页 > 解决方案 > React：避免在路由上重新渲染相同的组件

javascript - React：避免在路由上重新渲染相同的组件

问题描述

我有一个包含 10 个图表的屏幕（使用 recharts.org）——单击图表时，我想将路线从http://localhost:3000/charts切换到http://localhost:3000/charts/first并且简单让第一个图表全屏显示，但没有重新渲染，因为任何数据都不会改变。

关于如何实现这一目标的任何建议？

标签： javascriptreactjsreact-routerrecharts

解决方案

做到这一点的唯一方法（至少在我以前的经验中）是将图表与路线处于同一水平（带有一些条件......），如果您不需要它，您可以更改路线地方......问题是它没有为网格/弹性提供太大的灵活性，但它可以工作：P（在我的情况下，我选择的图表总是在顶部，所以它非常适合，你可以尝试一些基于条件的样式位置，但我担心它会重新渲染）

<Route  path="/charts" >
 {history.pathname === '/charts/first' && <Chart data ..../>}
 {history.pathname === '/charts/second' && <Chart data ..../>}
 <Route  path="/charts/first" >
  <h1> Up you have the unRendered graph </h1>
</Route>
</Route>

*

Chart 是任何 rechart 图表（条形图，饼图 ...）的包装器，并具有 REACT MEMO IMPLEMENTED

*

如果您需要更多帮助，我花了几天时间解决这个问题，请在此处发表评论

推荐阅读