Javascript 反应：避免在路由上重新呈现相同组件

我有一个包含10个图表的屏幕（使用recharts.org）——当点击一个图表时，我想将路线从切换到，只需将第一个图表全屏显示，但不会重新呈现，因为数据不会发生任何变化

关于如何实现这一点，有什么建议吗？

唯一的方法（至少在我以前的经验中）是将图表与路线放在同一级别上（带有一些条件…），如果您不需要它在顶部，您可以更改路线位置。。。问题是它没有给grid/flex提供太多的灵活性，但它可以工作：P（在我的例子中，我选择的图形总是在顶部，所以它非常适合，你可以根据位置尝试一些有条件的样式，但我担心它会重新渲染）

{history.pathname=='/charts/first'&&}
{history.pathname=='/charts/second'&&}
上面是未渲染的图形

*

图表是任何rechart图形（条形图、饼图…）的包装器，并实现了REACT MEMO

*

---

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

对于这样一个一般性的问题，很难给出具体的解决方案。你有没有考虑过<代码>反应？备忘录< /代码>？谢谢！为什么/你需要记住什么？另外，我不确定我是否真正理解你的结构。。。我想做的是在

/charts

和

/charts/first

两个位置呈现相同的图表，只是宽度/高度不同。结构：路径不精确，因此当你得到/charts时，它将进入内部，并且在内部有另一条路径，因此，当您从/charts更改为/charts/first时，它仍将停留在相同的路线/图表中，但也会进入/charts/first中，因此，图表已经从第一条路线/图表中计算出来了看看嵌套路线=>不同的宽度和高度可能是个问题，因为recharts是基于SVG计算的，其中每个大小都取决于图表的高度和宽度（这就是为什么我认为它可能会重新渲染），如果您真的需要更改宽度和高度，但无法在GitHub中创建存储库，我可能会尝试一些解决方法（请使用图形逻辑，而不是所有项目）。

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