Question

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

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

Answer 1

唯一的方法（至少以我以前的经验）是将图表与“路线”（在某些条件下）处于同一水平，如果不需要，可以更改路线的位置...问题是它对网格/柔韧性没有太大的灵活性，但可以使用：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>

*

图表是任何图表的包装图（条形图，饼图...），并且已实现“反应备忘录”

*

如果您需要更多帮助，我花了几天时间在这里发表评论

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

1 个答案: