如何在更改网址时阻止react-route重新呈现整个应用

时间:2018-05-23 10:55:07

标签: reactjs performance react-router

我正在使用应用程序使用react-history。 每次使用以下内容更改URL时,都会重新呈现整个应用程序:

props.history.location.replace(newPath);

这种行为会对表现产生很大的影响 我想要的只是更改更新一些查询参数的URL,这样用户就可以通过网址与另一个查询共享视图。
我想知道是否有办法解决这个问题。
谢谢你的建议。

1 个答案:

答案 0 :(得分:0)

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

//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>
    );
  }
}

通过这种方式,除非整个应用程序,否则只会重新呈现布局内的内容。