How does react render multiple pages in app.js using react-router?

React is a Single Page Application (SPA) frontend framework. An intuitive definition of what this means is that your web app needs only 1 page load. However, an SPA can support the user experience of having "multiple pages", including changing the url path: e.g. www.app.com/home -> www.app.com/about. That is what the react router offers, the ability to associate different url paths to react components (www.app.com/home renders the Home component).

The underlying principle of SPAs is that instead of serving a new page, only one html page is served and the framework handles all UI changes via direct DOM manipulation.

Doesn't this mean all the pages must be rendered before the HTML loads the page? or am I wrong?

No, only the component associated to particular route/url-matcher will be rendered at any given time.

Yep, keep with React Router.

Nops, only the page/component route that match the router path will be rendered.

But let me clarify it...

When you say:

all the pages must be rendered before the HTML loads

I believe you mean loaded (the website/app files) and not rendered.

Render means that the route page/component will exist in DOM. So, loaded yes, rendered nope.

You can optimize it using React Code-Splitting and/or playing with Webpack Split Chunks.