Shulou(Shulou.com)05/31 Report--

What are the knowledge points of this article "react single page and multi-page difference?" most people do not understand, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "react single page and multi-page difference" article.

Differences: 1. Different URL of multi-page application returns different HTML, while different URL of single-page application returns the same HTML;2. Even if common resources exist on two pages of multi-page application, these common resources will be emptied and re-downloaded, while these common resources of single-page application will not be downloaded repeatedly.

The operating environment of this tutorial: Windows10 system, react17.0.1 version, Dell G3 computer.

What is the difference between a single page and multiple pages in react

Multi-page application

URL is used by browsers to request appropriate resources from the server. Different URL returns different HTML.

The browser clears page An and downloads the corresponding js/css resource rendering page B based on the HTML content you just returned.

Even if there are common resources on the An and B pages (navigation bars, etc.), these public resources will be emptied and downloaded again.

It is used to realize page jump.

Single page application

URL is used for browsers to request corresponding resources from the server, but different URL returns the same HTML (shell HTML), but the HTML content is updated.

The browser does not clear page A, but only downloads the js/css resources needed for page B (code fragmentation)

If there are common resources on the An and B pages (navigation bars, etc.), these public resources will not be downloaded repeatedly.

Refresh the web page and visit http://localhost:3000. In the browser's web tool, you can see that three files have been downloaded, namely common.bundle., bundle. And home.chunk.js, where home.chunk.j is a Home-specific shard file. When we click on the About link in the top column, we can see that there is only one newly downloaded file about.chunk button.

Used to implement page updates

The above is about the content of this article on "what is the difference between react single page and multi-page". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.