React-Router: Process of server request with Client-Side Routing?

Question

I'm trying to understand to client-side routing works. But I still got a hard time to imagine how it works.

Let's say I've got some code like this (for example):

<Router>
    <Route path="/" component={Home} />
    <Route path="/users" component={Users} />
    <Route path="/widgets" component={Widgets} />
</Router>

How is the process?

Are the code of the components are all downloaded from the webserver at once when I request index.html? Then everything is managed with JavaScript on the client-side and no further requests are needed?

Let's say the URL ' example.com/#/users ' is called. As a consequence some part of the side is exchanged with the content of Users-component?

Or are the components requested when needed? Lazy loaded so to speak.

Answer 1

The process: The route you described imports all components handling routes, so they are all available in resulting bundle. Router matches path and renders these components accordingly (on / renders Home , on /users renders Users and so on). They are not lazy loaded because they are already included in route definition.

To have components lazy loaded you will have to use dynamic routing