Question

我有3条路线使用相同的组件，并根据路线显示略有不同的内容。问题是在每个路由更改时，整个组件从头开始安装/卸载导致性能问题。什么是避免卸载但仍使用相同组件并拥有这3条路线的最佳方法？

<Route path="/Products" exact render={Products} />
<Route path="/Products/shoes" exact component={Products} />
<Route path="/Products/books" exact component={Products} />

React Router版本4.

Answer 1

您可以根据路线条件路径匹配渲染路线，在这种情况下，每次路线更改时都不会重新安装

<Route path="/Products(/shoes|/books)?" exact render={Products} />

Answer 2

只要匹配新路线，并行路线就会卸载。您需要在Product组件中包装“/ Products / shoes”和“/ Products / books”的组件。在react-router v4中，您需要嵌套类似于组件的路由。因此，您需要在子组件中包含包含“/ Products”路由和其他2的产品组件。

坦率地说，我刚刚给出了概述，请阅读react-router 4文档以便更好地理解。

Answer 3

Shubham的解决方案现在有所不同，两年后就出现了

case object TypeFoo extends Type {
    override def toString() = "Foo"
}
case object TypeBar extends Type {
    override def toString() = "Bar"
}
def repType= (
    "Foo" ^^^ TypeFoo
    | "Bar" ^^^ TypeBar
)

通知订单。

React Router避免卸载

3 个答案: