如何防止反应路由器重新渲染以前渲染的页面？

Question

我想我的反应路由器有一些问题.如何防止反应路由器重新渲染以前渲染的页面？

我有这样的路由器代码:

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组件被渲染.然后我点击"类别"链接,并且类别组件被渲染.然后,当我再次单击"home"链接时,组件Gateway重新呈现.它的状态得到了重置.这真是令人沮丧,因为我无法弄清楚为什么它的状态被重置了.

这有什么解决方案吗？

Answer 1

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

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