更改网址时如何防止React-Route重新呈现整个应用程序

Question

I'm working on an app use react-history. The whole app get re-rendered every time i change the URL by using:

props.history.location.replace(newPath);

That behavior make a great impact to performance.
What i want is just change the URL which update some query params so user can share the view with another one just by the url.
I wonder if there are a way to work around this problem.
Thanks for advice.

Answer 1

You need to wrap your component inside a common component where you had specified your layout. Only the body of the layout needs to be re-rendered.

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

By using this way, only the content inside the layout would be re-rendered unless the whole application.