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被破坏（不仅仅是隐藏），因此应该重新渲染。

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

1 个答案: