更改url时如何防止react-route重新渲染整个应用程序答案

【问题标题】：How to prevent react-route from re-render the whole app when changing url更改url时如何防止react-route重新渲染整个应用程序
【发布时间】：2018-11-02 08:07:02
【问题描述】：

我正在开发一个使用 react-history 的应用程序。每次我使用以下方法更改 URL 时，整个应用程序都会重新呈现：

props.history.location.replace(newPath);

这种行为会对性能产生很大影响。
我想要的只是更改更新一些查询参数的 URL，以便用户可以通过 url 与另一个人共享视图。
我想知道是否有办法解决这个问题。
感谢您的建议。

【问题讨论】：

您的视图正在再次呈现，因为您的 url 正在更改。如果您可以保持 url 相同并将查询参数作为要渲染组件的道具，那么我想应该没问题
感谢 Aseem Upadhyay，但问题是用户想要复制并粘贴 URL，以便他们可以与其他同事分享他们的观点。所以，我不能把它作为道具传递给组件。

标签： reactjs performance react-router

【解决方案1】：

您需要将组件包装在您指定布局的公共组件中。只有布局的主体需要重新渲染。

//App.js
import Layout from "../LayoutContainer/Layout"; // where i designed the application's layout
class App extends Component {
  render() {
    return (
      <Layout>
        <Router >
          <div>
            <Route path="/home" exact component={Dashboard} />
            <Route path="/product" exact component={Products} />
          </div>
        </Router>
      </Layout>
    );
  }
}

通过这种方式，只有布局内的内容会被重新渲染，除非整个应用程序。

【讨论】：

感谢 Jeeva，但我们的应用程序中没有通用布局。导航栏、标题栏等布局组件将根据 URL 的路径动态更改。但我只想更改查询参数部分。
不，导航栏、标题栏或侧边栏等布局组件不能更改。您可能已经设计了包含所有这些组件的布局，并且您将分配空间以在布局组件的主体内呈现其他组件。每次 URL 更改时，布局的正文都会更改，除非页面中的所有组件。您只需将静态组件保留在布局中。在布局正文中，只需指定如下 this.props.children 即可在 URL 更改时呈现子组件
嗨 Jeeva，布局不包含内容部分，它放在内容部分之前：