React Router Load On Demand

It is frequently asked that how to load components on demand if you use react with react-router.

In the official readme, there is a recommended loader named react-router-proxy-loader that can fullfill this need.

However, it depends on webpack and there are many cases where webpack is not included in the build task.

In fact, it is quite easy to achieve the same goal without webpack. Here is an example with little dependencies, and if you see example/jsx/loader.js, you will find that it is nearly the same as react-router-proxy-loader, except that you don't need to have webpack installed.

Some preparation

Checkout this repo by git clone or download the ziped file.

git clone https://github.com/chyingp/react-router-load-on-demand.git

Install react-tools to compile jsx to js

npm install -g react-tools

Run the example

Enter the example folder via command line

cd example

Then run jsx to compile jsx format file to normal js file.

jsx -w jsx js

Next start a mini server. (Thanks to https://gist.github.com/ryanflorence/701407)

node server.js

Finally, visits it in browser http://localhost:8888/

See the result: component was loaded on demand

You can see the beautiful page.

Only home.js was loaded at first view.

Click the about link

The about component was shown.

Only at this time, the about component was loaded on demand.