如何防止React Router重新渲染已经渲染过的页面？

Question

我可以帮您翻译成中文。这段内容是关于编程的React路由问题。如何防止React路由重新渲染已经渲染过的页面？以下是我的路由代码：

class App extends React.Component {
  render() {
    return (
        <div>
            <NavBar/>
            {this.props.children}
        </div>
    );
  }
}

ReactDOM.render(
    (
        <Router history={hashHistory}>
            <Route path="/" component={App}>
                <IndexRoute component={Gateway} />
                <Route path="home" component={Gateway} />
                <Route path="categories" component={Categories} />
            </Route>
        </Router>
    ), document.getElementById('my-app')
);

当我第一次访问页面时，它会命中索引，Gateway组件被渲染。然后我点击“分类”链接，Categories组件被渲染。然后当我再次点击“主页”链接时，Gateway组件被重新渲染。它的状态被重置了。这真的很令人沮丧，因为我无法弄清楚为什么它的状态被重置了。

有没有解决方案？

- Ian

---

如果您没有使用Redux等状态管理工具，则必须查找正确的方法，仅使用React来共享路由之间的状态。请参阅此帖子中的答案：https://dev59.com/VZ3ha4cB1Zd3GeqPSEtU 或者在Google上搜索“react router share state between routes”。 - Jayce444

Answer 1

如果有任何状态需要保存，您应该将其存储在某个地方，例如组件的状态（或者如果使用redux，则是redux状态）。

在react中，您可以在组件中定义函数shouldComponentUpdate()，以便强制React不重新渲染您的DOM。但在react-router的情况下，第一个路由的DOM被销毁（而不仅仅是隐藏），因此应该重新渲染。

- Antoine Trouve